useLayoutEffect қашан шақырылады және ол useEffect-тен қалай ерекшеленеді?

useLayoutEffect React DOM-ға барлық өзгерістер қолданылғаннан кейін, бірақ браузер экрандағы жаңартуларды көрсетпес бұрын шақырылады. Бұл визуалды жаңартудан бұрын орындалуы керек операцияларды орындауға мүмкіндік береді, мысалы, элементтердің өлшемдерін өлшеу немесе күйді DOM-мен синхрондау.

useEffect-тен айырмашылығы, ол браузер өзгерістерді көрсеткеннен кейін асинхронды түрде шақырылады, ал useLayoutEffect көрсетуді тоқтатып, оның коды аяқталғанша күтеді.

Мысал:

useLayoutEffect(() => {
  const height = ref.current.clientHeight;
  // Мүмкін, жарықшақтарды болдырмау үшін бірден күйді жаңартуға болады
  setHeight(height);
}, []);

useEffect(() => {
  // Мұнда визуалды көрсетілімге әсер етпейтін жанама әсерлерді орындауға болады
}, []);