Comments 9
useLayoutEffect - срабатывает когда компоненты уже находятся на virtual dom (в памяти и можно прочитать/установить различные свойств), но еще не попали в real dom.
useLayotEffect(() => {
boxRef.current.scrollTo({ top: boxRef.current.scrollHeight });
}, [])
на момент useLayoutEffect компонент уже попал в реальный dom (и даже записался в ref), но ещё не отрисовался на экране
Есть ещё такие определения:
useEffect - применяет сайдэфекты ПОСЛЕ фазы отрисовки (paint) в браузере.
useLayoutEffect - применяет сайдэфекты после расчёта макета (dom calculating / layout / reflow) страницы и ДО фазы отрисовки (paint) в браузере.
// работает eще производительнее
// потому что при каждом рендере
// не использует хук, не создаёт замыкание
const copy2 = useRef();
copy2.current = { prop1, prop2, prop3 };
Было бы интересно услышать ответ на вопрос, можно ли передавать в useEffect первым агрументом не void коллбек, а какую-нибудь функцию? Какие минусы данного способа?
Например:
useEffect(() => someFunction(), [])
useEffect(someFunction(), [])
Что значит можно или нет? Есть же "Эффекты со сбросом"
Я от кого то слышал, что правильнее написать:
useEffect(() => {
foo()
});
а не
useEffect(foo());
Если перефразировать мой вопрос, то насколько валиден второй пример? Есть ли подводные камни, которые делают второй вариант менее предпочтительнее
Любой callback - это и есть функция. Поэтому, конечно, можно. Насколько правильно - зависит от ситуации. Если там небольшая логика, наверно лучше написать прямо внутри () = > {}
Если большая логика, то можно добавить useEffect(foo);
А foo описать хоть в отдельном файле, чтобы не мозолила глаза
Можно и целиком передавать функцию, это будет работать. Но обращаю внимание, что в комментарии второй вариант не равен первому.
// 1 это длинный вариант
useEffect(() => {
foo()
});
// 2 это сокращенный
useEffect(foo);
// 3 а это будет правильный только если foo возвращает какую-то функцию, иначе работать не будет
useEffect(foo());
React hooks, как не выстрелить себе в ноги. Часть 2: useEffect и useLayoutEffect