import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("әр рендер 1")); console.log("әр рендер 2"); useEffect(() => { console.log("әр рендер 3"); return () => { console.log(4); }; }, [count]); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Арттыру </button> ); }

Бұл React-компонентте келесідей орын алады:

1. useLayoutEffect(() => console.log("әр рендерден кейін 1"));

   • Барлық DOM өзгерістерінен кейін, браузер көрсетпес бұрын синхронды түрде шақырылады.
   • Әр рендерден кейін орындалады.

2. console.log("әр рендерден кейін 2");

   • Компоненттің әр рендерінде, функцияның ішінде орындалады.

3. useEffect(() => { ... }, [count]);

   • count өзгерген сайын орындалады.
   • Әр өзгерісте, алдымен тазарту функциясы шақырылады (ол "4" шығарады), содан кейін негізгі әсер ("әр рендерден кейін 3" деп шығарады).

4. Түйме count мәнін біреуге арттырады кезінде басылады.

Бірінші рендер кезінде логтардың тәртібі:

• "әр рендерден кейін 2" (компоненттің ішінде)
• "әр рендерден кейін 1" (useLayoutEffect)
• "әр рендерден кейін 3" (useEffect)

count өзгерген кезде:

• "әр рендерден кейін 2"
• "әр рендерден кейін 1"
• "4" (алдыңғы әсердің тазарту функциясы)
• "әр рендерден кейін 3"

Назар аударыңыз, useLayoutEffect синхронды түрде рендерден кейін шақырылады, ал useEffect — асинхронды түрде көрсетуден кейін.

Сонымен қатар, setCount-те инкрементті түзету керек: ++prev орнына prev => prev + 1 қолданған дұрыс, себебі жанама әсерлерден сақтайды:

<button onClick={() => setCount(prev => prev + 1)}>
  Арттыру
</button>