useLayoutEffect ב-React: מדידה לפני שהדפדפן מצייר

useLayoutEffect הוא גרסה של useEffect שרצה מוקדם יותר: מיד אחרי ש-React עדכנה את ה-DOM, אבל לפני שהדפדפן מצייר את הפריים החדש. קוד בתוכו יכול למדוד אלמנטים ולשנות את ה-layout, והמשתמש רואה רק את התוצאה הסופית. הוא חוסם את הציור בזמן שהוא רץ, אז השתמשו בו רק כשצריך את התזמון הזה.

import { useState, useEffect, useLayoutEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    console.log('1. render');

    useEffect(() => {
        console.log('3. effect (usually after paint)');
    });

    useLayoutEffect(() => {
        console.log('2. layout effect (before paint)');
    });

    return <button onClick={() => setCount(count + 1)}>Rendered with {count}</button>;
}

האפקטים מוצהרים בסדר effect ואז layout effect, אבל הקונסול מדפיס את ה-layout effect ראשון בכל רינדור. סדר ההצהרה לא משנה בין שני ההוקים; התזמון שלהם כן.

התחביר

החתימה זהה ל-useEffect: פונקציית setup, cleanup אופציונלי ומערך תלויות.

useLayoutEffect(() => {
    // runs after the DOM update, before paint
    return () => {
        // cleanup, before the next run and on unmount
    };
}, [dependencies]);

כל מה שאתם יודעים על תלויות ו-cleanup מ-useEffect חל כאן. ההבדל היחיד הוא מתי React קוראת לו.

מתי כל אחד רץ

אחרי רינדור, React מעדכנת את ה-DOM ואז עושה שלושה דברים בסדר קבוע:

1. מריצה את כל ה-cleanups של ה-layout effects ואת ה-layout effects, באופן סינכרוני.
2. נותנת לדפדפן לצייר. אם layout effect קבע state, React קודם מרנדרת שוב, עדיין לפני הציור.
3. מריצה אפקטים רגילים, בדרך כלל אחרי הציור.

לאורך עץ, כל layout effect רץ לפני כל אפקט רגיל, וילדים רצים לפני ההורים שלהם, כי הורה יכול לסיים רק אחרי שהילדים שלו במקום:

import { useEffect, useLayoutEffect, useState } from 'react';

function Child() {
    useLayoutEffect(() => {
        console.log('Child layout effect');
    });
    useEffect(() => {
        console.log('Child effect');
    });
    return <p>Child</p>;
}

function Parent() {
    useLayoutEffect(() => {
        console.log('Parent layout effect');
    });
    useEffect(() => {
        console.log('Parent effect');
    });
    return <Child />;
}

export default function App() {
    const [n, setN] = useState(0);
    return (
        <div>
            <button onClick={() => setN(n + 1)}>Render again ({n})</button>
            <Parent key={n} />
        </div>
    );
}

הקונסול מציג קודם את שני ה-layout effects, Child ואז Parent, ואז את שני האפקטים הרגילים באותו סדר. ה-key={n} גורם לכל לחיצה לעשות mount ל-Parent חדש, כך שמקבלים את אותן ארבע שורות בכל פעם. הוסיפו לכל אפקט cleanup שרושם, וראו את הישנים רצים לפני החדשים.

בעיית ההבהוב

דמיינו tooltip שאמור להופיע מעל הכפתור שלו, אלא אם אין מקום מעליו, ואז הוא הולך מתחת. אי אפשר לדעת אם יש מקום עד שה-tooltip נמצא ב-DOM ואפשר למדוד את הגובה שלו. אז הרינדור קורה בשני מעברים:

1. מרנדרים את ה-tooltip איפשהו, כדי שאפשר יהיה למדוד אותו.
2. מודדים אותו, מחשבים את המיקום האמיתי, קובעים state, ומרנדרים שוב.

עם useEffect, הדפדפן עשוי לצייר בין שני המעברים, והמשתמש רואה את ה-tooltip קופץ מהמיקום הראשון לשני. עם useLayoutEffect, המעבר השני קורה לפני הציור, כך שהמיקום הראשון אף פעם לא מוצג.

import { useLayoutEffect, useRef, useState } from 'react';

function Tooltip({ anchor, text }) {
    const ref = useRef(null);
    const [top, setTop] = useState(0);

    useLayoutEffect(() => {
        const height = ref.current.offsetHeight;
        const above = anchor.offsetTop - height - 6;
        const fits = above >= 0;
        console.log(fits ? 'room above: placing above' : 'no room above: placing below');
        setTop(fits ? above : anchor.offsetTop + anchor.offsetHeight + 6);
    }, [anchor]);

    const style = {
        position: 'absolute', top, left: anchor.offsetLeft,
        background: '#222', color: '#fff', padding: '4px 8px', borderRadius: 4, fontSize: 13,
    };
    return <div ref={ref} style={style}>{text}</div>;
}

export default function App() {
    const [anchor, setAnchor] = useState(null);
    const show = (e) => setAnchor(e.currentTarget);
    const hide = () => setAnchor(null);

    return (
        <div style={{ position: 'relative', height: 160 }}>
            <button onMouseEnter={show} onMouseLeave={hide} style={{ position: 'absolute', top: 0 }}>
                Hover me (top)
            </button>
            <button onMouseEnter={show} onMouseLeave={hide} style={{ position: 'absolute', top: 110 }}>
                Hover me (lower)
            </button>
            {anchor && <Tooltip anchor={anchor} text="A tooltip that picks its side" />}
        </div>
    );
}

רחפו מעל הכפתור העליון: אין מעליו מקום, ולכן ה-tooltip מופיע מתחתיו. רחפו מעל התחתון והוא מופיע מעליו. הקונסול אומר לכם באיזה צד המדידה בחרה. שנו את useLayoutEffect ל-useEffect ורחפו שוב: ה-tooltip יכול עכשיו להבהב בראש התיבה לפריים אחד לפני שהוא זז. במחשב מהיר זה לעיתים קרובות מהיר מדי מכדי לשים לב, וזו בדיוק הסיבה שהבאג הזה משתחרר לפרודקשן ואז מדווח מטלפונים איטיים יותר.

offsetHeight, offsetTop ו-getBoundingClientRect() מכריחים כולם את הדפדפן לחשב layout, ולכן קריאה שלהם ב-layout effect נותנת את הערכים האמיתיים של ה-DOM ש-React בדיוק כתבה.

מדידת אלמנט

אותו דפוס עובד לכל גודל שהרינדור תלוי בו: קוראים אותו עם ref ב-layout effect, שומרים ב-state, ומרנדרים איתו.

import { useLayoutEffect, useRef, useState } from 'react';

export default function App() {
    const [text, setText] = useState('Short');
    const [width, setWidth] = useState(null);
    const boxRef = useRef(null);

    useLayoutEffect(() => {
        const w = Math.round(boxRef.current.getBoundingClientRect().width);
        console.log('measured width for', JSON.stringify(text));
        setWidth(w);
    }, [text]);

    return (
        <div>
            <button onClick={() => setText(text + ' and longer')}>Make it longer</button>
            <p>
                <span ref={boxRef} style={{ background: '#ffeaa7', padding: '2px 6px' }}>
                    {text}
                </span>
            </p>
            <p>The highlighted text is {width} px wide.</p>
        </div>
    );
}

לחצו על הכפתור ושורת הרוחב מתעדכנת באותו פריים כמו הטקסט. הדף אף פעם לא מציג טקסט חדש ליד רוחב ישן, כי הרינדור השני קורה לפני הציור. הסירו את [text] ממערך התלויות והמדידה רצה אחרי כל רינדור, כולל זה שה-setWidth שלה עצמה גורם לו; היא נעצרת שם רק כי הרוחב כבר לא משתנה.

העדיפו useEffect

layout effect מעכב את הציור עד שהוא מסתיים, ואם הוא קובע state, גם עד שהרינדור הנוסף מסתיים. אחד איטי גורם לכל עדכון בדף להרגיש איטי. השתמשו ב-useLayoutEffect רק כשכל אלה נכונים:

• האפקט קורא layout (גודל, מיקום, גלילה).
• הוא משנה את מה שמרונדר לפי הקריאה הזו.
• מצב הביניים היה נראה לעין ונראה שגוי.

כל השאר (טעינת נתונים, מנויים, טיימרים, לוגים, אנליטיקס) שייך ל-useEffect. כלל מהיר: התחילו עם useEffect, ועברו רק אם אתם רואים הבהוב.

useEffect רץ בדרך כלל אחרי הציור, אבל לא תמיד. כשהעדכון מגיע מפעולת משתמש בדידה כמו לחיצה או הקשה על מקש, React עשויה להריץ את האפקטים לפני שהדפדפן מצייר. זו אחת הסיבות שהבהוב יכול להופיע במצב אחד ולא באחר.

רינדור בצד השרת

אפקטים אף פעם לא רצים בזמן רינדור בצד השרת, וגם useLayoutEffect לא. השרת שולח את ה-HTML של הרינדור הראשון, וה-layout effect רץ רק אחרי hydration בדפדפן. React 18 ומטה הזהירו "useLayoutEffect does nothing on the server" כשקומפוננטה כזו רונדרה בשרת; React 19 הסירה את האזהרה הזו.

אם הפריים הראשון שמרונדר בשרת היה נראה שגוי בלי המדידה, יש שני תיקונים נפוצים: לרנדר fallback ניטרלי (למשל, להסתיר את ה-tooltip עד שהוא נמדד), או לרנדר את הקומפוננטה רק בצד הלקוח:

function ClientOnly({ children }) {
    const [mounted, setMounted] = useState(false);
    useEffect(() => setMounted(true), []);
    return mounted ? children : null;
}

useInsertionEffect

יש הוק אפקט שלישי, useInsertionEffect, שרץ לפני כל layout effect. הוא קיים בשביל ספריות CSS-in-JS שמייצרות תגיות <style> בזמן ריצה: הכנסת הסגנונות שם אומרת ש-layout effect שמודד אלמנט כבר רואה אותו מעוצב. הוא לא יכול לעדכן state ו-refs עוד לא מחוברים, כך שאין לו שימוש בקוד של אפליקציה. אם אתם לא כותבים ספריית עיצוב, לא תצטרכו אותו.