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

Источник: https://www.youtube.com/watch?v=gnkrDse9QKc
Канал: Ben Awad
Опубликовано: 20.11.2020

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*   Метод `map()` для перебора массива данных и генерации JSX-элементов [16:53].
*   Создание вспомогательной функции `getFullUserName` для объединения имени и фамилии пользователя [17:23].
*   Определение интерфейсов TypeScript для типизации данных пользователя, включая объект `name` и ссылку на изображение `picture` [19:45].

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

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

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

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

*   Ввел новое состояние `nextPageNumber` для отслеживания текущей страницы [25:04].
*   Обновил функцию получения данных так, чтобы она принимала номер страницы в качестве аргумента.
*   Применил оператор spread (`...`) для добавления новых пользователей в уже существующий массив в состоянии приложения [27:45].

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

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

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

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

*   Клеман Михайлеску сначала предложил проигнорировать предупреждение, так как код работал корректно. Позже он предложил использовать `useRef` для сохранения ссылки на функцию без запуска повторных рендеров [32:45].
*   Бен Авад настаивал на важности соблюдения правил хуков. Он объяснил, что отсутствие функций в массиве зависимостей может привести к проблемам с замыканиями и устаревшими данными [31:02].

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