P.S. Предложения и пожелания пишите в @duffils. Искренне будем рады вашим идеям
Please open Telegram to view this post
VIEW IN TELEGRAM
Почему React использует свой SyntheticEvent, и какие преимущества это даёт?
Ответ
React использует SyntheticEvent для обеспечения кросс-браузерной совместимости и оптимизации обработки событий. Вместо прямого использования нативных событий браузера, React оборачивает их в собственную абстракцию.
Преимущества:
✅ Кросс-браузерность – одинаковое поведение событий в разных браузерах.
✅ Автоматическое управление памятью – пул событий (event pooling) снижает нагрузку на GC.
✅ Дополнительные методы – stopPropagation(), preventDefault() работают везде одинаково.
✅ Делегирование событий – React использует один обработчик на корневом уровне, что улучшает производительность.
Ответили? Ставьте👍
Ответ
Преимущества:
Ответили? Ставьте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Как работает алгоритм reconciliation (Fiber)?
Ответ
Reconciliation (согласование) – это процесс сравнения Virtual DOM перед обновлением реального DOM. В React 16+ он работает на основе Fiber – новой архитектуры, которая:
✅ Разбивает рендеринг на фазы (рендер и коммит), позволяя приостанавливать и возобновлять работу.
✅ Поддерживает приоритеты (например, анимации и пользовательский ввод имеют высший приоритет).
✅ Использует связанный список (Fiber nodes) для эффективного обхода дерева компонентов.
Как это выглядит:
✅ Фаза рендера (не блокирующая) – React вычисляет изменения.
✅ Фаза коммита (синхронная) – применяет изменения к DOM.
Ответили? Ставьте 👍
Ответ
Как это выглядит:
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
Чем отличается memo от useMemo и когда их не стоит применять?
Ответ
📌 React.iss.onemo – оптимизирует перерендер компонента, если пропсы не изменились (поведение как у PureComponent).
📌 useMemo – кэширует результат вычислений внутри компонента, чтобы избежать повторных расчетов.
Когда не стоит применять?
❌ Если компонент и так рендерится редко.
❌ Если сравнение пропсов/зависимостей сложнее, чем сам рендер.
❌ Если useMemo используется для тривиальных вычислений (оверхед может перевесить пользу).
Ответили? Ставьте 👍
Ответ
Когда не стоит применять?
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
Почему нельзя условно вызывать хуки (Hooks) в React?
Ответ
Хуки должны вызываться в одинаковом порядке при каждом рендере. React полагается на их последовательность для корректного управления состоянием.
Пример ошибки:
if (condition) {
useState(); // При изменении порядок хуков сломается
}
useEffect();
➡️ Ошибка: "Rendered fewer/more hooks than expected".
Решение: Все хуки должны вызываться на верхнем уровне компонента.
Ответили? Ставьте 👍
Ответ
Пример ошибки:
if (condition) {
useState(); // При изменении
condition}
useEffect();
Решение: Все хуки должны вызываться на верхнем уровне компонента.
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
В каких случаях React.StrictMode дважды вызывает эффект useEffect в dev-режиме?
Ответ
StrictMode намеренно дважды вызывает эффекты (и некоторые методы) в dev-режиме, чтобы:
🔍 Выявить неожиданные побочные эффекты (например, изменения глобальных переменных).
🔍 Проверить чистоту рендера (готовность к Concurrent Mode).
Где это происходит?
✅ useEffect, useLayoutEffect
✅ constructor, render (в классовых компонентах)
Ответили? Ставьте 👍
Ответ
Где это происходит?
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
Что такое Error Boundary, и почему его нельзя реализовать с помощью хуков?
Ответ
Error Boundary – компонент, перехватывающий ошибки в дочерних компонентах и показывающий fallback UI.
Почему не на хуках?
🚫 Хуки не могут перехватывать ошибки в дочерних компонентах.
🚫 Для этого нужны методы жизненного цикла (componentDidCatch, getDerivedStateFromError).
Ответили? Ставьте 👍
Ответ
Почему не на хуках?
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
В чём реальная разница между компонентами и элементами в React?
Ответ
Компонент – функция или класс, который возвращает описание UI (например, <Button />).
Элемент – объект, описывающий, что рендерить (например, { type: 'button', props: { ... } }).
Ключевое отличие:
Элементы неизменяемы и создаются при каждом рендере, а компоненты – это "фабрики" элементов.
Ответили? Ставьте 👍
Ответ
Элемент – объект, описывающий, что рендерить (например, { type: 'button', props: { ... } }).
Ключевое отличие:
Элементы неизменяемы и создаются при каждом рендере, а компоненты – это "фабрики" элементов.
Ответили? Ставьте 👍
👍1
Как оптимально обрабатывать анимации в React-приложениях?
Ответ:
🎯 CSS-анимации – самый производительный вариант (transition, @keyframes ).
🎯 React Transition Group – управление классами анимаций.
🎯 Framer Motion / React Spring – сложные анимации с requestAnimationFrame.
🎯 Избегать setState в анимациях – использовать transform вместо top/left.
Ответили? Ставьте 👍
Ответ:
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
Почему использование ключей при рендеринге списков влияет на производительность?
Ответ
Ключи (key) помогают React идентифицировать элементы при обновлении списка.
Что без ключей?
🔴 React пересоздаёт DOM-элементы, даже если они просто поменяли порядок.
🔴 Потеря состояния вложенных компонентов.
🔴 Лишние ререндеры.
Оптимальные ключи: id из данных, не индекс массива (иначе при сортировке будут проблемы).
Ответили? Ставьте 👍
Ответ
Что без ключей?
Оптимальные ключи: id из данных, не индекс массива (иначе при сортировке будут проблемы).
Ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Что за «concurrent rendering» и как он может сломать приложение, если использовать неправильно?
Ответ
Concurrent Rendering – возможность React прерывать рендеринг для выполнения более приоритетных задач (например, пользовательского ввода).
Как может сломать приложение?
💥 Неустойчивый код – если компонент зависит от времени или порядка выполнения.
💥 Побочные эффекты – двойные вызовы в StrictMode выявляют скрытые баги.
💥 Неконтролируемые обновления – если состояние предполагает синхронные изменения.
Решение:
✅ Писать чистые компоненты (без побочных эффектов в рендере).
✅ Использовать стабильные ключи в списках.
✅ Учитывать асинхронность в логике.
ответили? Ставьте 👍
Ответ
Как может сломать приложение?
Решение:
ответили? Ставьте 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Как и почему NaN !== NaN, но при этом Object.is(NaN, NaN) === true?
Ответ
В JavaScript NaN (Not a Number) – это единственное значение, которое не равно самому себе по спецификации IEEE 754. Это историческое решение для выявления ошибок вычислений.
NaN !== NaN → true (по стандарту).
Object.is (NaN, NaN) → true, потому что Object.is использует строгое сравнение (как ===), но с особыми правилами для NaN и +0/-0.
Ответили? Ставьте 👍
Ответ
NaN !== NaN → true (по стандарту).
Ответили? Ставьте 👍