CodeSnack

Когда нужно точно измерить размеры элемента до его отрисовки на экране (например, для анимаций или корректного позиционирования), useLayoutEffect обеспечит точные данные. Пример: 🔹 Кейс: Если ширина зависит от других элементов на странице, useLayoutEffect гарантирует, что она будет измерена до того, как элемент отобразится пользователю Когда нужно после рендера программы прокрутить страницу к определённому месту, useLayoutEffect может быть использован для гарантированного выполнения скролла до отображения изменений...

useLayoutEffect — это хук, похожий на useEffect, но с одним важным отличием: он выполняется синхронно после всех изменений в DOM, перед тем, как браузер отрисует изменения на экране. Это делает его полезным для задач, где важно измерение DOM-элементов или установка их положения до отображения пользователю. 🔧...

В React, каждый раз, когда родительский компонент рендерится, все его функции, включая те, что передаются как props дочерним компонентам, пересоздаются заново. Даже если логика функции не изменилась, React считает, что передается новая функция, потому что это другой объект в памяти. 📉 Проблема: Когда дочерний компонент получает новые пропсы (включая функцию), он тоже перерендеривается. Это может вызвать ненужные ререндеры, даже если реальных изменений в данных нет. В больших приложениях или сложных компонентах это может негативно сказаться на производительности...

useCallback — это хук, который возвращает мемоизированную версию функции, сохраняющуюся между рендерами. Это полезно, если вы передаёте функцию в компонент, зависящий от неё (например, дочерний компонент или хуки). useCallback предотвращает создание новой функции при каждом рендере компонента, что помогает оптимизировать производительность....

Лексическое окружение (Lexical Environment) — это специальная структура, которая создается при каждом вызове функции или выполнении блока кода. Она хранит все переменные и функции, доступные в текущем контексте выполнения. Каждая функция "помнит" своё лексическое окружение, то есть то место в коде, где она была создана. Именно благодаря этому функции могут получать доступ к переменным не только из своего блока, но и из родительских блоков, где они были объявлены. 💡 Пример: 👀 Что происходит? При вызове outer() создается своё лексическое окружение, которое хранит outerVar...

Замыкание — это способность функции запоминать своё лексическое окружение даже после завершения её выполнения. Это позволяет внутренней функции обращаться к переменным из внешней. 💡 Пример замыкания:...