Вопросы React Frontend Developer

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

Рендеринг в React происходит в два этапа: первый — это виртуальный рендер, когда React создает виртуальный DOM, а второй — это обновление реального DOM. Когда изменяется состояние или пропсы, React вычисляет различия между предыдущим и новым виртуальным DOM и обновляет только те части реального DOM, которые изменились, что делает рендеринг эффективным.

SSR — это процесс рендеринга React-приложения на сервере в HTML на каждый запрос. Это улучшает SEO, так как поисковые боты видят готовый контент, и ускоряет первоначальную загрузку страницы для пользователя, потому что браузер сразу получает готовую для отображения разметку.

Сначала React выполняет render, затем на этапе коммита вызывается useLayoutEffect, и только после отрисовки браузером вызывается useEffect. useLayoutEffect выполняется синхронно и блокирует отрисовку, а useEffect — асинхронно, после paint. Поэтому useLayoutEffect используют для работы с layout, а useEffect — для побочных эффектов, не влияющих на разметку.

useSyncExternalStore — это хук React для безопасного подключения внешнего состояния к рендерингу. Он позволяет подписаться на внешний стор и гарантирует, что компонент всегда рендерится с актуальными данными. Этот хук решает проблемы, которые возникают при ручных подписках в условиях concurrent rendering и Strict Mode. Его используют как основу для state-менеджеров.