React Frontend Developer

Question 1

Как можно объединить обновления нескольких стейтов в один ре-рендер в React 17?

Accepted Answer

В React 17 можно использовать ReactDOM.unstable_batchedUpdates() для группировки нескольких обновлений состояния в один ре-рендер. Также в некоторых случаях автоматическое батчинг работает в обработчиках событий React. В React 18 батчинг работает автоматически во всех сценариях, включая асинхронные операции.

Question 2

Чем отличается стейт-менеджер от контекста с точки зрения селекторов?

Accepted Answer

React Context при изменении значения перерендеривает все компоненты-потребители, даже если они используют только часть данных. Стейт-менеджеры, такие как Redux, позволяют использовать селекторы, которые подписываются только на определённые части состояния. Это предотвращает лишние ререндеры и повышает производительность.

Question 3

В каких случаях контекст (Context API) является достаточным решением для управления состоянием, а в каких стоит использовать внешний стейт-менеджер?

Accepted Answer

Context API подходит для простого проброса данных, которые редко меняются, например тема или язык. Внешний стейт-менеджер (Redux, Zustand) нужен при частых обновлениях, сложной логике или большом количестве взаимосвязанных состояний. Context вызывает ререндер всех потребителей при любом изменении, что снижает производительность. Внешние решения оптимизируют обновления и предоставляют инструменты для отладки.

Question 4

Как тестируется бизнес-логика, реализованная через Effector или Redux (unit-тесты для сторов/эффектов)?

Accepted Answer

Для тестирования бизнес-логики в Effector используют встроенные методы .watch() и .on() для проверки сторов и эффектов. В Redux тестируют редьюсеры как чистые функции, передавая начальное состояние и экшн. Для асинхронных операций в Redux применяют middleware-тесты с mock-запросами. Оба подхода изолируют логику от UI.

Question 5

Как устроен стейт-менеджер Effector и в чём его основные отличия от Redux?

Accepted Answer

Effector — это реактивный стейт-менеджер, основанный на событиях и стримах, в отличие от Redux, который использует действия и редьюсеры. В Effector нет единого хранилища, вместо этого используются независимые сторы, которые обновляются через события. Основные отличия: встроенная поддержка асинхронности через эффекты, отсутствие бойлерплейта и более простая работа с зависимостями.

Question 6

Какую проблему для React решают стейт-менеджеры (например, prop drilling)?

Accepted Answer

Prop drilling возникает, когда данные передаются через несколько уровней компонентов, даже если промежуточные компоненты их не используют. Это делает код громоздким и сложным для поддержки. Стейт-менеджеры (например, Redux, Zustand) или Context API позволяют хранить глобальное состояние и предоставлять его напрямую нужным компонентам, минуя промежуточные звенья.

Question 7

Как принцип HOC применяется внутри стейт-менеджеров?

Accepted Answer

HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или логикой. В стейт-менеджерах, например в Redux, HOC `connect` используется для подписки компонента на хранилище и передачи ему части состояния и действий. Это позволяет отделить логику управления состоянием от представления, делая код более модульным и переиспользуемым.

Question 8

Для чего нужны стейт-менеджеры и чем они отличаются от использования Context?

Accepted Answer

Стейт-менеджеры (например, Redux) нужны для централизованного управления сложным состоянием приложения, особенно когда данные используются многими компонентами. Context API решает похожую задачу, но он менее производителен при частых обновлениях, так как вызывает ререндер всех потребителей. Стейт-менеджеры предлагают более предсказуемое обновление и инструменты для отладки.

Вопросы React Frontend Developer