Hook-ul useLayoutEffect are aceeași semnătură de apel ca useEffect, dar diferă radical prin momentul execuției: el rulează sincron imediat după ce React a actualizat arborele DOM, dar înainte ca browserul să picteze efectiv pixelii pe ecran (înainte de Paint).
Acest mecanism blochează temporar afișarea vizuală pentru a permite citirea dimensiunilor fizice ale elementelor DOM (înălțime, lățime, coordonate de poziționare) și ajustarea stării înainte ca utilizatorul să vadă o poziție greșită, eliminând complet fenomenul deranjant de flicker (pâlpâire).
Poziționarea precisă a unui Tooltip deasupra unui buton
import { useState, useRef, useLayoutEffect } from 'react';
export function ButonCuTooltip() {
const [aratat, setAratat] = useState(false);
const [inaltimeTooltip, setInaltimeTooltip] = useState(0);
const refTooltip = useRef(null);
useLayoutEffect(() => {
if (aratat && refTooltip.current) {
// Măsurăm dimensiunea reală a nodului DOM randat:
const { height } = refTooltip.current.getBoundingClientRect();
setInaltimeTooltip(height);
}
}, [aratat]);
return (
<div className="container-relativ">
<button onMouseEnter={() => setAratat(true)} onMouseLeave={() => setAratat(false)}>
Trece cursorul aici
</button>
{aratat && (
<div
ref={refTooltip}
className="tooltip"
style={{ top: `-${inaltimeTooltip + 8}px` }}
>
Informație utilă calculată fără nicio clipire pe ecran!
</div>
)}
</div>
);
}| Criteriu | useEffect |
useLayoutEffect |
|---|---|---|
| Moment de execuție | Asincron, după ce browserul a pictat ecranul. | Sincron, după mutația DOM, înainte de pictare. |
| Impact pe performanță | Nu blochează randarea; optim pentru majoritatea cazurilor. | Blochează pictarea; se folosește strict pentru măsurători DOM. |
| Server-Side Rendering | Nu rulează pe server (fără avertismente). | Generează avertisment pe SSR dacă nu se protejează apelul. |
Întrebări & Exemple de Cod:
Hook-ul useLayoutEffect: Măsurători Sincrone de Layout DOMAi o nelămurire despre utilizarea comenzii
Hook-ul useLayoutEffect: Măsurători Sincrone de Layout DOMsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.