Вопросы для собеседования по React

Как работает React?

• Виртуальный DOM
• Реконселяция
• Фибер
• Батчинг

Преимущества

• Использование Virtual DOM вместо Browser DOM
• Компонентный подход
• Однонаправленный поток данных

Недостатки

Что вызывает ре-рендер компонентов?

• Изменение props
• Изменение state
• Изменение context
• Изменение зависимостей в хуках
• Изменение ключей
• forceUpdate()
• Ре-рендер родителей

Различие классовых и функциональных компонентов?

Классовые:

• Плюсы:
• Сложнее: this, контекст
• Тянут по прототипу лишние методы
• Можно добавлять/удалять методы
• Использование HOC (создание большой вложенности)
• Сложно анализировать объектно-ориентированный код
• Сложный лайф-сайкл
• Минусы
• Подходит для библиотек
• Компонент Error Boundry может быть только классом из-за метода .didCatch

Функциональные:

• Простой лайф-сайкл при помощи хуков

Хуки

Преимущества

• Менее затратные по вычислениям:
• Создаются экземпляры класса
• Происходит связывание обработчиков событий
• Компонент с хуками имеет менее глубокое дерево компонентов

Особенности useState?

• Хук синхронный
• Нельзя мутировать state
• Сеттер useState является асинхронным из-за батчинга

Разница между useEffect и useLayoutEffect?

useEffect

• Асинхронный
• Вызывается после отрисовки компонента

useLayoutEffect

• Синхронный
• Вызывается когда компонент появился в Virtual DOM, но еще не был отрисован
• По сути откладывает процесс отрисовки в браузере

Что такое useReducer?

Хук Дэна Абрамова для удобного перехода с redux на чистый react + сontext API

Мемоизация в React

• useMemo
• useCallback
• React.memo

Архитектура

Подходы:

Устаревшие:

• Нативная
• Модульная
• MVC
• MVVM

Современные:

• FLUX
• Atomic Design
• Features Sliced Design 2.0

Распределенные:

• Микрофронтенд
• Монорепозиторий

Стейт-менеджеры

Когда использовать внутренние и сторонние инструменты для работы с состоянием?

• Для работы с простым локальным состоянием компонента нужно использовать внутренние инструменты useState useReducer useSelector
• Для описания сложной бизнес-логики, где требуются сложные взаимосвязи сущностей нужно использовать сторонние библиотеки Redux MobX Effector

Redux

Что такое Redux?

• Фреймворк для создания бизнес-логики
• Создан на основе парадигмы flux
• В основе паттерн Singleton
• Основные атомы:
• action
• reducer

Преимущества redux-toolkit

• Комплект удобных инструментов для решения типовых задач
• RTK-query
• Автоматическая генерация actions
• Встроенный long polling
• Встроенная асинхронность

MobX

• Создан на основе парадигмы flux
• В основе паттерн Singleton

Оптимизация

Разница между React, Angular и Vue

React 18

Проблемы переезда:

• Проблемы с рефами
• Изменение батчинга в пользу автоматического