Бен Авад проверил навыки Клемана Михайлеску в React.js

Бен Авад 20 ноября 2020 года провел пробное техническое собеседование с Клеманом Михайлеску для проверки его навыков работы в React.js. В ходе встречи гость продемонстрировал решение базовых задач фронтенд-разработки, включая создание счетчика, получение данных через API и реализацию пагинации.

🔢 Создание базового компонента счетчика 0:54

Первым заданием для Клемана Михайлеску стала разработка простого счетчика. Интервьюер попросил отобразить число и кнопку, которая увеличивает значение на единицу при каждом нажатии .

Разработчик реализовал задачу следующим образом:

• Использовал хук useState для управления состоянием переменной counter.
• Инициализировал начальное значение нулем .
• Создал функцию setCounter, которая прибавляет единицу к текущему значению при событии onClick.

Бен Авад подчеркнул, что визуальное оформление (CSS) в данном случае не имеет значения . Клеман Михайлеску использовал стандартные HTML-теги p и button для вывода интерфейса.

🌐 Получение данных из внешнего API 3:01

Вторая задача заключалась в работе с Random User API для получения данных о пользователях. Бен Авад предложил гостю использовать любые доступные инструменты, включая поиск в Google или Stack Overflow .

Клеман Михайлеску выбрал библиотеку axios для выполнения HTTP-запросов. Процесс реализации включал несколько этапов:

1. Установка библиотеки через менеджер пакетов .
2. Создание функции fetchRandomData для выполнения GET-запроса к API .
3. Настройка вывода полученного JSON-объекта на экран в виде строки для проверки структуры данных.

Сначала разработчик планировал вызывать функцию по нажатию кнопки, но затем решил реализовать загрузку при старте приложения . Для этого он применил хук useEffect с пустым массивом зависимостей, что имитирует поведение метода жизненного цикла componentDidMount.

🖼 Отображение списка пользователей и TypeScript 14:10

После успешного получения данных интервьюер поручил визуализировать результат в виде списка с именами и фотографиями . Клеман Михайлеску модифицировал код, чтобы обрабатывать массив пользователей, даже если API возвращает только один объект.

Для структурирования кода разработчик применил следующие подходы:

• Метод map() для перебора массива данных и генерации JSX-элементов .
• Создание вспомогательной функции getFullUserName для объединения имени и фамилии пользователя .
• Определение интерфейсов TypeScript для типизации данных пользователя, включая объект name и ссылку на изображение picture .

Бен Авад отметил, что Клеман Михайлеску набрал максимально возможный балл за выполнение базовых требований к реализации интерфейса .

📑 Реализация бесконечной пагинации 22:13

Для усложнения задачи Бен Авад попросил добавить функционал загрузки дополнительных данных ("Load More") . API поддерживает параметр page, что позволяет запрашивать следующие страницы с результатами.

Клеман Михайлеску реализовал логику накопления данных:

• Ввел новое состояние nextPageNumber для отслеживания текущей страницы .
• Обновил функцию получения данных так, чтобы она принимала номер страницы в качестве аргумента.
• Применил оператор spread (...) для добавления новых пользователей в уже существующий массив в состоянии приложения .

Это позволило пользователю нажимать на кнопку и видеть, как список имен и фотографий дополняется новыми элементами без потери старых .

⚠️ Проблема зависимостей в useEffect 29:44

В финальной части собеседования возникла дискуссия по поводу предупреждения линтера в хуке useEffect. Инструменты анализа кода указывали на пропущенную зависимость — функцию fetchNextUser .

Позиции сторон распределились следующим образом:

• Клеман Михайлеску сначала предложил проигнорировать предупреждение, так как код работал корректно. Позже он предложил использовать useRef для сохранения ссылки на функцию без запуска повторных рендеров .
• Бен Авад настаивал на важности соблюдения правил хуков. Он объяснил, что отсутствие функций в массиве зависимостей может привести к проблемам с замыканиями и устаревшими данными .

В итоге Бен Авад признал, что Клеман Михайлеску успешно справился с интервью, продемонстрировав уверенное владение основными концепциями React.js . Собеседники упомянули, что вторая часть этой встречи, посвященная алгоритмам, доступна на канале гостя.