Middle+

Que s'affichera dans la console lors du premier rendu d'un composant React avec un composant enfant (useLayoutEffect, useEffect) ?

sobes.tech IA

Réponse de l'IA

При первом рендере React-компонента с дочерним компонентом, в котором используются хуки useLayoutEffect и useEffect, порядок вызовов будет следующим:

Сначала React отрисует DOM.
Затем выполнится callback из useLayoutEffect — он вызывается синхронно сразу после изменения DOM, но до того, как браузер отрисует изменения на экране.
После этого браузер обновит экран.
И только потом выполнится callback из useEffect — он вызывается асинхронно после того, как браузер отрисовал изменения.

Пример вывода в консоль:

function Child() {
  React.useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, []);

  React.useEffect(() => {
    console.log('useEffect');
  }, []);

  return <div>Child</div>;
}

function Parent() {
  return <Child />;
}

// При первом рендере в консоли будет:
// useLayoutEffect
// useEffect

Таким образом, useLayoutEffect срабатывает раньше useEffect при первом рендере.

Précédent Suivant