Iż-żewġ juru l-effects, imma f'mumenti differenti relattiv għat-tpinġija tal-browser — u din id-differenza tal-ħin hija l-qbila kollha.
useEffect tmexxex wara li l-browser tkun tpinġet. Hija asinkriona u mhux-bloccatura. Uża għal kwalunkwe ħaġa (dejta, sottoskrizzyoniet, reġistrazzjoni).useLayoutEffect tmexxex . Uża meta għandek taqra l-layout u tbiddel id-DOM fl-istess qafas biex tevita t-tnaqqis viżibbli.Librerija ta' mistoqsijiet ta' intervisti tal-IT b'tweġibiet dettaljati — minn Junior sa Senior.
Iddonarender → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Immaġina li tkejjel element u terġa' tpoġġi t-tooltip ibbażat fuq id-daqs tagħha. B' useEffect, l-utent jara t-tooltip fil-post ħat, imbagħad taħlaq:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
B' useEffect, l-istess kodiċi jmexxex wara t-tpinġija → tnaqqis ta' qafas wieħed.
useLayoutEffect jagħmel l-UI tħuss ħażin, għaliex il-browser ma tistax tpinġi sa ma tispiċċa.Regola tar-rigg: standward għal useEffect; biss uża useLayoutEffect għal kejl/mutazzjoniet tal-DOM sinkron li mod ieħor jnaqqsu.