import React, { useState, useEffect, useLayoutEffect } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("har render 1")); console.log("har render 2"); useEffect(() => console.log("har render 3")); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Increment </button> ); } // mount -> har render 2, har render 1, har render 3 // update -> har render 2, har render 1, har render 3 // unmount 4

Reactda hooklarning chaqirilish tartibi va ishlash tartibi quyidagicha:

• Har bir renderda avvalo komponentning tanasi bajariladi, bunda console.log("each render 2") chaqiriladi.
• Keyin, useLayoutEffect chaqiriladi, u sinxron tarzda DOM o'zgartirilgandan keyin, lekin brauzer o'zgarishlarni chizishdan oldin bajariladi. Bu yerda console.log("each render 1") chaqiriladi.
• Brauzer o'zgarishlarni chizgandan so'ng, useEffect chaqiriladi va console.log("each render 3") bajariladi.

Shunday qilib, montaj va yangilashda loglar tartibi:

each render 2
each render 1
each render 3

O'chirishda, useEffect va useLayoutEffect tozalash funksiyalarini qaytarishi mumkin, ammo bu misolda bunday emas, shuning uchun o'chirishda loglar yo'q.

Tushuntirish bilan misol:

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>
  );
}

Muhim: useLayoutEffect bajarilguncha renderni bloklaydi, useEffect esa asinxron tarzda renderdan keyin bajariladi.