import React, { useState, useEffect, useLayoutEffect } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("každé renderování 1")); console.log("každé renderování 2"); useEffect(() => console.log("každé renderování 3")); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Zvětši </button> ); } // montáž -> každé renderování 2, každé renderování 1, každé renderování 3 // aktualizace -> každé renderování 2, každé renderování 1, každé renderování 3 // odmontování 4

V Reacte je poradie volania a vykonávania hookov a logov nasledovné:

• Pri každom renderi sa najskôr vykoná telo komponentu, kde sa volá console.log("each render 2").
• Následne sa volá useLayoutEffect, ktorý sa vykonáva synchronne hneď po zmene DOM, ale pred tým, ako prehliadač vykreslí zmeny. Tam sa volá console.log("each render 1").
• Po tom, ako prehliadač vykreslí zmeny, sa volá useEffect, kde sa vykoná console.log("each render 3").

Takže pri montáži a aktualizácii bude poradie logov:

each render 2
each render 1
each render 3

Pri odpojení môžu useEffect a useLayoutEffect vracať funkcie na vyčistenie, ale v tomto príklade ich nie sú, takže pri odpojení nie sú žiadne logy.

Príklad s vysvetlením:

import React, { useState, useEffect, useLayoutEffect } from 'react';

export default () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log("each render 1");
  });

  console.log("each render 2");

  useEffect(() => {
    console.log("each render 3");
  });

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Increment
    </button>
  );
}

Dôležité: useLayoutEffect blokuje vykreslenie do jeho vykonania, zatiaľ čo useEffect sa vykonáva asynchrónne po vykreslení.