React hooks, как не выстрелить себе в ноги. Часть 2: useEffect и useLayoutEffect

[Alexandroppolus]

useLayoutEffect - срабатывает когда компоненты уже находятся на virtual dom (в памяти и можно прочитать/установить различные свойств), но еще не попали в real dom.

useLayotEffect(() => {
boxRef.current.scrollTo({ top: boxRef.current.scrollHeight });
}, [])

на момент useLayoutEffect компонент уже попал в реальный dom (и даже записался в ref), но ещё не отрисовался на экране

[igor_zvyagin]

Вы правы, благодарю! Исправил

[noodles]

Есть ещё такие определения:

• useEffect - применяет сайдэфекты ПОСЛЕ фазы отрисовки (paint) в браузере.

• useLayoutEffect - применяет сайдэфекты после расчёта макета (dom calculating / layout / reflow) страницы и ДО фазы отрисовки (paint) в браузере.

[mrlika]

// работает eще производительнее
// потому что при каждом рендере
// не использует хук, не создаёт замыкание
const copy2 = useRef();
copy2.current = { prop1, prop2, prop3 };

[eugene_bobkov]

Было бы интересно услышать ответ на вопрос, можно ли передавать в useEffect первым агрументом не void коллбек, а какую-нибудь функцию? Какие минусы данного способа?

Например:

useEffect(() => someFunction(), [])
useEffect(someFunction(), [])

[c_kotik]

Что значит можно или нет? Есть же "Эффекты со сбросом"

[eugene_bobkov]

Я от кого то слышал, что правильнее написать:

useEffect(() => {
	foo()
});

а не

useEffect(foo());

Если перефразировать мой вопрос, то насколько валиден второй пример? Есть ли подводные камни, которые делают второй вариант менее предпочтительнее

[ialse]

Любой callback - это и есть функция. Поэтому, конечно, можно. Насколько правильно - зависит от ситуации. Если там небольшая логика, наверно лучше написать прямо внутри () = > {}
Если большая логика, то можно добавить useEffect(foo);

А foo описать хоть в отдельном файле, чтобы не мозолила глаза

[igor_zvyagin]

Можно и целиком передавать функцию, это будет работать. Но обращаю внимание, что в комментарии второй вариант не равен первому.

// 1 это длинный вариант
useEffect(() => {
  foo()
});

// 2 это сокращенный
useEffect(foo);

// 3 а это будет правильный только если foo возвращает какую-то функцию, иначе работать не будет
useEffect(foo());