هوک useLayoutEffect در ری‌اکت: اندازه‌گیری و به‌روزرسانی هم‌زمان DOM

ری‌اکت هوک‌های قدرتمندی برای مدیریت اثرات جانبی (side effects) در کامپوننت‌های شما ارائه می‌دهد. در حالی که useEffect ابزار اصلی برای اکثر اثرات جانبی ناهم‌زمان است، useLayoutEffect زمانی وارد عمل می‌شود که شما نیاز به انجام اندازه‌گیری‌ها و به‌روزرسانی‌های هم‌زمان DOM دارید. این راهنما useLayoutEffect را به‌طور عمیق بررسی می‌کند و هدف، موارد استفاده و نحوه استفاده مؤثر از آن را توضیح می‌دهد.

درک نیاز به به‌روزرسانی‌های هم‌زمان DOM

قبل از پرداختن به جزئیات useLayoutEffect، درک این موضوع که چرا به‌روزرسانی‌های هم‌زمان DOM گاهی ضروری هستند، بسیار مهم است. خط لوله رندر مرورگر شامل چندین مرحله است، از جمله:

• تجزیه HTML (Parsing): تبدیل سند HTML به یک درخت DOM.
• رندرینگ (Rendering): محاسبه استایل‌ها و طرح‌بندی هر عنصر در DOM.
• نقاشی (Painting): ترسیم عناصر بر روی صفحه.

هوک useEffect ری‌اکت به‌صورت ناهم‌زمان پس از اینکه مرورگر صفحه را نقاشی (paint) کرد، اجرا می‌شود. این موضوع عموماً به دلایل عملکردی مطلوب است، زیرا از مسدود شدن رشته اصلی جلوگیری کرده و به مرورگر اجازه می‌دهد پاسخگو باقی بماند. با این حال، موقعیت‌هایی وجود دارد که شما نیاز دارید قبل از نقاشی مرورگر، DOM را اندازه‌گیری کرده و سپس بر اساس آن اندازه‌گیری‌ها، DOM را قبل از اینکه کاربر رندر اولیه را ببیند، به‌روزرسانی کنید. مثال‌ها عبارتند از:

• تنظیم موقعیت یک راهنمای ابزار (tooltip) بر اساس اندازه محتوای آن و فضای موجود در صفحه.
• محاسبه ارتفاع یک عنصر برای اطمینان از اینکه در یک کانتینر جا می‌شود.
• همگام‌سازی موقعیت عناصر هنگام اسکرول یا تغییر اندازه.

اگر برای این نوع عملیات از useEffect استفاده کنید، ممکن است با یک پرش یا گلیچ بصری مواجه شوید، زیرا مرورگر حالت اولیه را قبل از اجرای useEffect و به‌روزرسانی DOM نقاشی می‌کند. اینجاست که useLayoutEffect وارد عمل می‌شود.

معرفی useLayoutEffect

useLayoutEffect یک هوک ری‌اکت است که شبیه به useEffect است، اما به‌صورت هم‌زمان پس از اینکه مرورگر تمام تغییرات DOM را انجام داد، اما قبل از اینکه صفحه را نقاشی کند، اجرا می‌شود. این به شما امکان می‌دهد اندازه‌گیری‌های DOM را بخوانید و DOM را بدون ایجاد پرش بصری به‌روزرسانی کنید. سینتکس اصلی آن به این صورت است:

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // کدی که پس از تغییرات DOM اما قبل از نقاشی اجرا می‌شود

    // به‌صورت اختیاری یک تابع پاک‌سازی بازگردانید
    return () => {
      // کدی که هنگام unmount شدن یا رندر مجدد کامپوننت اجرا می‌شود
    };
  }, [dependencies]);

  return (
    

      {/* محتوای کامپوننت */}
    
  );
}

مانند useEffect، useLayoutEffect دو آرگومان می‌پذیرد:

1. یک تابع حاوی منطق اثر جانبی.
2. یک آرایه اختیاری از وابستگی‌ها. اثر فقط در صورتی دوباره اجرا می‌شود که یکی از وابستگی‌ها تغییر کند. اگر آرایه وابستگی خالی باشد ([])، اثر فقط یک بار پس از رندر اولیه اجرا می‌شود. اگر هیچ آرایه وابستگی ارائه نشود، اثر پس از هر رندر اجرا خواهد شد.

چه زمانی از useLayoutEffect استفاده کنیم

نکته کلیدی برای درک زمان استفاده از useLayoutEffect، شناسایی موقعیت‌هایی است که نیاز به انجام اندازه‌گیری‌ها و به‌روزرسانی‌های DOM به‌صورت هم‌زمان، قبل از نقاشی مرورگر دارید. در اینجا برخی از موارد استفاده رایج آورده شده است:

۱. اندازه‌گیری ابعاد عناصر

ممکن است نیاز داشته باشید عرض، ارتفاع یا موقعیت یک عنصر را برای محاسبه طرح‌بندی سایر عناصر اندازه‌گیری کنید. برای مثال، می‌توانید از useLayoutEffect برای اطمینان از اینکه یک راهنمای ابزار (tooltip) همیشه در داخل ویوپورت قرار می‌گیرد، استفاده کنید.

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

function Tooltip() {
  const [isVisible, setIsVisible] = useState(false);
  const tooltipRef = useRef(null);
  const buttonRef = useRef(null);

  useLayoutEffect(() => {
    if (isVisible && tooltipRef.current && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect();
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const windowWidth = window.innerWidth;

      // Calculate the ideal position for the tooltip
      let left = buttonRect.left + (buttonRect.width / 2) - (tooltipWidth / 2);

      // Adjust the position if the tooltip would overflow the viewport
      if (left < 0) {
        left = 10; // Minimum margin from the left edge
      } else if (left + tooltipWidth > windowWidth) {
        left = windowWidth - tooltipWidth - 10; // Minimum margin from the right edge
      }

      tooltipRef.current.style.left = `${left}px`;
      tooltipRef.current.style.top = `${buttonRect.bottom + 5}px`;
    }
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>Toggle Tooltip
      {isVisible && (
        

          This is a tooltip message.
        
      )}
    
  );
}

در این مثال، useLayoutEffect برای محاسبه موقعیت راهنمای ابزار بر اساس موقعیت دکمه و ابعاد ویوپورت استفاده می‌شود. این کار تضمین می‌کند که راهنمای ابزار همیشه قابل مشاهده است و از صفحه بیرون نمی‌زند. متد getBoundingClientRect برای دریافت ابعاد و موقعیت دکمه نسبت به ویوپورت استفاده می‌شود.

۲. همگام‌سازی موقعیت عناصر

ممکن است نیاز داشته باشید موقعیت یک عنصر را با عنصر دیگری همگام‌سازی کنید، مانند یک هدر چسبان که با اسکرول کاربر او را دنبال می‌کند. باز هم، useLayoutEffect می‌تواند تضمین کند که عناصر قبل از نقاشی مرورگر به‌درستی تراز شده‌اند و از هرگونه گلیچ بصری جلوگیری می‌کند.

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

function StickyHeader() {
  const [isSticky, setIsSticky] = useState(false);
  const headerRef = useRef(null);
  const placeholderRef = useRef(null);

  useLayoutEffect(() => {
    const handleScroll = () => {
      if (headerRef.current && placeholderRef.current) {
        const headerHeight = headerRef.current.offsetHeight;
        const headerTop = headerRef.current.offsetTop;
        const scrollPosition = window.pageYOffset;

        if (scrollPosition > headerTop) {
          setIsSticky(true);
          placeholderRef.current.style.height = `${headerHeight}px`;
        } else {
          setIsSticky(false);
          placeholderRef.current.style.height = '0px';
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      

      

        
Sticky Header
      
      
{/* Some content to scroll */}
    
  );
}

این مثال نحوه ایجاد یک هدر چسبان را نشان می‌دهد که با اسکرول کاربر در بالای ویوپورت باقی می‌ماند. useLayoutEffect برای محاسبه ارتفاع هدر و تنظیم ارتفاع یک عنصر جایگزین (placeholder) استفاده می‌شود تا از پرش محتوا هنگام چسبان شدن هدر جلوگیری شود. خاصیت offsetTop برای تعیین موقعیت اولیه هدر نسبت به سند استفاده می‌شود.

۳. جلوگیری از پرش متن هنگام بارگذاری فونت

هنگامی که فونت‌های وب در حال بارگذاری هستند، مرورگرها ممکن است ابتدا فونت‌های جایگزین را نمایش دهند، که باعث می‌شود پس از بارگذاری فونت‌های سفارشی، متن دوباره جریان پیدا کند (reflow). می‌توان از useLayoutEffect برای محاسبه ارتفاع متن با فونت جایگزین و تنظیم حداقل ارتفاع برای کانتینر استفاده کرد تا از این پرش جلوگیری شود.

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

function FontLoadingComponent() {
  const textRef = useRef(null);
  const [minHeight, setMinHeight] = useState(0);

  useLayoutEffect(() => {
    if (textRef.current) {
      // Measure the height with the fallback font
      const height = textRef.current.offsetHeight;
      setMinHeight(height);
    }
  }, []);

  return (
    

      
This is some text that uses a custom font.
    
  );
}

در این مثال، useLayoutEffect ارتفاع عنصر پاراگراف را با استفاده از فونت جایگزین اندازه‌گیری می‌کند. سپس خاصیت استایل minHeight دیو والد را تنظیم می‌کند تا از پرش متن هنگام بارگذاری فونت سفارشی جلوگیری کند. «MyCustomFont» را با نام واقعی فونت سفارشی خود جایگزین کنید.

مقایسه useLayoutEffect و useEffect: تفاوت‌های کلیدی

مهم‌ترین تفاوت بین useLayoutEffect و useEffect زمان اجرای آن‌هاست:

• useLayoutEffect: به‌صورت هم‌زمان پس از تغییرات DOM اما قبل از نقاشی مرورگر اجرا می‌شود. این کار مانع از نقاشی مرورگر تا زمان پایان اجرای اثر می‌شود.
• useEffect: به‌صورت ناهم‌زمان پس از نقاشی صفحه توسط مرورگر اجرا می‌شود. این کار مانع نقاشی مرورگر نمی‌شود.

از آنجایی که useLayoutEffect مانع از نقاشی مرورگر می‌شود، باید با احتیاط از آن استفاده کرد. استفاده بیش از حد از useLayoutEffect می‌تواند منجر به مشکلات عملکردی شود، به‌ویژه اگر اثر حاوی محاسبات پیچیده یا زمان‌بر باشد.

در اینجا جدولی برای خلاصه‌سازی تفاوت‌های کلیدی آورده شده است:

ویژگی	useLayoutEffect	useEffect
زمان اجرا	هم‌زمان (قبل از نقاشی)	ناهم‌زمان (بعد از نقاشی)
مسدودکننده	نقاشی مرورگر را مسدود می‌کند	مسدودکننده نیست
موارد استفاده	اندازه‌گیری‌ها و به‌روزرسانی‌های DOM که نیاز به اجرای هم‌زمان دارند	اکثر اثرات جانبی دیگر (فراخوانی API، تایمرها و غیره)
تأثیر بر عملکرد	بالقوه بالاتر (به دلیل مسدود کردن)	پایین‌تر

بهترین شیوه‌ها برای استفاده از useLayoutEffect

برای استفاده مؤثر از useLayoutEffect و جلوگیری از مشکلات عملکرد، این بهترین شیوه‌ها را دنبال کنید:

۱. با احتیاط از آن استفاده کنید

فقط زمانی از useLayoutEffect استفاده کنید که مطلقاً نیاز به انجام اندازه‌گیری‌ها و به‌روزرسانی‌های هم‌زمان DOM دارید. برای اکثر اثرات جانبی دیگر، useEffect انتخاب بهتری است.

۲. تابع اثر را کوتاه و کارآمد نگه دارید

تابع اثر در useLayoutEffect باید تا حد امکان کوتاه و کارآمد باشد تا زمان مسدود شدن را به حداقل برساند. از محاسبات پیچیده یا عملیات زمان‌بر در داخل تابع اثر خودداری کنید.

۳. از وابستگی‌ها هوشمندانه استفاده کنید

همیشه یک آرایه وابستگی به useLayoutEffect ارائه دهید. این کار تضمین می‌کند که اثر فقط در صورت لزوم دوباره اجرا می‌شود. با دقت در نظر بگیرید که کدام متغیرها باید در آرایه وابستگی گنجانده شوند. گنجاندن وابستگی‌های غیرضروری می‌تواند منجر به رندرهای مجدد غیرضروری و مشکلات عملکردی شود.

۴. از حلقه‌های بی‌نهایت اجتناب کنید

مراقب باشید با به‌روزرسانی یک متغیر state در داخل useLayoutEffect که خود نیز وابستگی آن اثر است، حلقه‌های بی‌نهایت ایجاد نکنید. این می‌تواند منجر به اجرای مکرر اثر و در نتیجه فریز شدن مرورگر شود. اگر نیاز به به‌روزرسانی یک متغیر state بر اساس اندازه‌گیری‌های DOM دارید، استفاده از یک ref برای ذخیره مقدار اندازه‌گیری شده و مقایسه آن با مقدار قبلی قبل از به‌روزرسانی state را در نظر بگیرید.

۵. گزینه‌های جایگزین را در نظر بگیرید

قبل از استفاده از useLayoutEffect، در نظر بگیرید که آیا راه‌حل‌های جایگزینی وجود دارد که نیازی به به‌روزرسانی‌های هم‌زمان DOM نداشته باشند. برای مثال، ممکن است بتوانید از CSS برای دستیابی به طرح‌بندی مورد نظر بدون دخالت جاوا اسکریپت استفاده کنید. ترنزیشن‌ها و انیمیشن‌های CSS نیز می‌توانند جلوه‌های بصری روانی را بدون نیاز به useLayoutEffect فراهم کنند.

useLayoutEffect و رندرینگ سمت سرور (SSR)

useLayoutEffect به DOM مرورگر متکی است، بنابراین هنگام استفاده در رندرینگ سمت سرور (SSR) یک هشدار ایجاد می‌کند. این به این دلیل است که هیچ DOMی روی سرور در دسترس نیست. برای جلوگیری از این هشدار، می‌توانید از یک بررسی شرطی استفاده کنید تا اطمینان حاصل کنید که useLayoutEffect فقط در سمت کلاینت اجرا می‌شود.

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

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      // کدی که به DOM متکی است
      console.log('useLayoutEffect running on the client');
    }
  }, [isClient]);

  return (
    

      {/* محتوای کامپوننت */}
    
  );
}

در این مثال، از یک هوک useEffect برای تنظیم متغیر state isClient به true پس از mount شدن کامپوننت در سمت کلاینت استفاده می‌شود. سپس هوک useLayoutEffect فقط در صورتی اجرا می‌شود که isClient برابر با true باشد، که از اجرای آن روی سرور جلوگیری می‌کند.

رویکرد دیگر استفاده از یک هوک سفارشی است که در طول SSR به useEffect بازمی‌گردد:

import { useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

سپس، می‌توانید به جای استفاده مستقیم از useLayoutEffect یا useEffect، از useIsomorphicLayoutEffect استفاده کنید. این هوک سفارشی بررسی می‌کند که آیا کد در محیط مرورگر اجرا می‌شود یا خیر (یعنی typeof window !== 'undefined'). اگر چنین باشد، از useLayoutEffect استفاده می‌کند؛ در غیر این صورت، از useEffect استفاده می‌کند. به این ترتیب، از هشدار در طول SSR جلوگیری می‌کنید در حالی که همچنان از رفتار هم‌زمان useLayoutEffect در سمت کلاینت بهره می‌برید.

ملاحظات جهانی و مثال‌ها

هنگام استفاده از useLayoutEffect در برنامه‌هایی که مخاطب جهانی دارند، موارد زیر را در نظر بگیرید:

• رندر متفاوت فونت‌ها: رندر فونت می‌تواند در سیستم‌عامل‌ها و مرورگرهای مختلف متفاوت باشد. اطمینان حاصل کنید که تنظیمات طرح‌بندی شما در پلتفرم‌های مختلف به‌طور یکسان کار می‌کند. تست برنامه خود را بر روی دستگاه‌ها و سیستم‌عامل‌های مختلف برای شناسایی و رفع هرگونه ناهماهنگی در نظر بگیرید.
• زبان‌های راست‌به‌چپ (RTL): اگر برنامه شما از زبان‌های RTL (مانند عربی، عبری) پشتیبانی می‌کند، مراقب باشید که اندازه‌گیری‌ها و به‌روزرسانی‌های DOM چگونه بر طرح‌بندی در حالت RTL تأثیر می‌گذارند. از خصوصیات منطقی CSS (مانند margin-inline-start, margin-inline-end) به جای خصوصیات فیزیکی (مانند margin-left, margin-right) برای اطمینان از انطباق صحیح طرح‌بندی استفاده کنید.
• بین‌المللی‌سازی (i18n): طول متن می‌تواند بین زبان‌ها به‌طور قابل توجهی متفاوت باشد. هنگام تنظیم طرح‌بندی بر اساس محتوای متنی، پتانسیل رشته‌های متنی طولانی‌تر یا کوتاه‌تر در زبان‌های مختلف را در نظر بگیرید. از تکنیک‌های طرح‌بندی انعطاف‌پذیر (مانند فلکس‌باکس CSS، گرید) برای تطبیق با طول‌های مختلف متن استفاده کنید.
• دسترسی‌پذیری (a11y): اطمینان حاصل کنید که تنظیمات طرح‌بندی شما تأثیر منفی بر دسترسی‌پذیری ندارد. راه‌های جایگزین برای دسترسی به محتوا در صورت غیرفعال بودن جاوا اسکریپت یا استفاده کاربر از فناوری‌های کمکی فراهم کنید. از ویژگی‌های ARIA برای ارائه اطلاعات معنایی در مورد ساختار و هدف تنظیمات طرح‌بندی خود استفاده کنید.

مثال: بارگذاری محتوای پویا و تنظیم طرح‌بندی در یک زمینه چندزبانه

یک وب‌سایت خبری را تصور کنید که مقالات را به زبان‌های مختلف به‌صورت پویا بارگذاری می‌کند. طرح‌بندی هر مقاله باید بر اساس طول محتوا و تنظیمات فونت ترجیحی کاربر تنظیم شود. در اینجا نحوه استفاده از useLayoutEffect در این سناریو آمده است:

1. اندازه‌گیری محتوای مقاله: پس از بارگذاری و رندر محتوای مقاله (اما قبل از نمایش آن)، از useLayoutEffect برای اندازه‌گیری ارتفاع کانتینر مقاله استفاده کنید.
2. محاسبه فضای موجود: فضای موجود برای مقاله روی صفحه را با در نظر گرفتن هدر، فوتر و سایر عناصر UI تعیین کنید.
3. تنظیم طرح‌بندی: بر اساس ارتفاع مقاله و فضای موجود، طرح‌بندی را برای اطمینان از خوانایی بهینه تنظیم کنید. برای مثال، ممکن است اندازه فونت، ارتفاع خط یا عرض ستون را تنظیم کنید.
4. اعمال تنظیمات مخصوص زبان: اگر مقاله به زبانی با رشته‌های متنی طولانی‌تر است، ممکن است نیاز به تنظیمات اضافی برای تطبیق با افزایش طول متن داشته باشید.

با استفاده از useLayoutEffect در این سناریو، می‌توانید اطمینان حاصل کنید که طرح‌بندی مقاله قبل از اینکه کاربر آن را ببیند به‌درستی تنظیم شده است، که از گلیچ‌های بصری جلوگیری کرده و تجربه خواندن بهتری را فراهم می‌کند.

نتیجه‌گیری

useLayoutEffect یک هوک قدرتمند برای انجام اندازه‌گیری‌ها و به‌روزرسانی‌های هم‌زمان DOM در ری‌اکت است. با این حال، به دلیل تأثیر بالقوه آن بر عملکرد، باید با احتیاط از آن استفاده شود. با درک تفاوت‌های بین useLayoutEffect و useEffect، پیروی از بهترین شیوه‌ها و در نظر گرفتن پیامدهای جهانی، می‌توانید از useLayoutEffect برای ایجاد رابط‌های کاربری روان و جذاب بصری بهره ببرید.

به یاد داشته باشید که هنگام استفاده از useLayoutEffect، عملکرد و دسترسی‌پذیری را در اولویت قرار دهید. همیشه راه‌حل‌های جایگزین را که نیازی به به‌روزرسانی‌های هم‌زمان DOM ندارند، در نظر بگیرید و برنامه خود را به‌طور کامل بر روی دستگاه‌ها و مرورگرهای مختلف آزمایش کنید تا از یک تجربه کاربری یکنواخت و لذت‌بخش برای مخاطبان جهانی خود اطمینان حاصل کنید.