useLayoutEffect менен useEffectтин айырмасы эмне?

useEffect асинхрондуу түрдө жыйынтыктоо жана DOM жаңыртуудан кийин ишке ашырылат. Бул визуализацияга таасир этпеген жанама таасирлер үчүн идеалдуу, мисалы, маалыматтарды сурау.

useLayoutEffect синхрондуу түрдө жыйынтыктоо жана рендерден кийин ишке ашырылат, бирок браузер "өзгөртүүлөрдү" экранга чийгенге чейин. Ал DOMдон маалымат окуу, DOMду синхрондуу түрдө өзгөртүү же анын өлчөмдөрүн өлчөө үчүн колдонулат, колдонуучу натыйжаны көрмөстөн мурун.

	useEffect	useLayoutEffect
Ишке ашыруу убактысы	Асимхрондуу	Синхрондуу
Убакыт	DOM рендерден жана чийүүдөн кийин	Рендерден кийин, бирок DOM чийүүдөн мурун
Максат	Визуализацияга таасир этпеген жанама таасирлер	DOM окуу/өзгөртүү, өлчөө, чийүүдөн мурун
Өндүрүмдүүлүк	Жалпысынан жакшыраак	Чийүүнү блоктоп калышы мүмкүн

useLayoutEffect колдонууда сак болуу керек, анткени ал браузердин кайра чийүүсүн потенциалдуу түрдө блоктоп, аткаруу көйгөйлөрүн жаратышы мүмкүн, өзгөчө жай уюлдарда. Көпчүлүк учурларда, useEffect колдонуу артыкчылыкка ээ.