قدرت useLayoutEffect برای حل خطای Hydration در Next js.

اگر قبلاً با Next.js کار کرده اید، ممکن است با خطای وحشتناک «محتوای متن مطابقت نداشت» مواجه شده باشید که به عنوان خطای هیدراتاسیون نیز شناخته می شود. این خطا زمانی رخ می دهد که HTML تولید شده در سرور با HTML تولید شده در مشتری در اولین رندر مطابقت نداشته باشد. یکی از دلایل رایج این خطا استفاده از useEffect برای به روز رسانی حالت است که باعث ایجاد یک افکت سوسو زدن یا jarring در صفحه می شود.

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

بیایید نگاهی به یک مثال بیندازیم. فرض کنید یک مؤلفه دارید که وقتی کاربر روی دکمه ای کلیک می کند، دسته فعال را در حافظه محلی تنظیم می کند:

import { useState } from 'react';

const MyComponent = () => {
  const [activeCategory, setActiveCategory] = useState('A');

  const handleClick = (category) => {
    setActiveCategory(category);
    localStorage.setItem('activeCategory', category);
  };

  return (
    <div>
      <button onClick={() => handleClick('A')}>Category A</button>
      <button onClick={() => handleClick('B')}>Category B</button>
      <button onClick={() => handleClick('C')}>Category C</button>
    </div>
  );
};

این کد در طول رندر اولیه به خوبی کار می کند، اما اگر از صفحه دور شوید و سپس برگردید، دسته فعال به “A” بازنشانی می شود زیرا وضعیت به مقدار اولیه خود بازنشانی می شود. برای رفع این مشکل، می توانید از useLayoutEffect برای تنظیم دسته فعال در حافظه محلی استفاده کنید:

import { useState, useLayoutEffect } from 'react';

const MyComponent = () => {
  const [activeCategory, setActiveCategory] = useState('A');

  useLayoutEffect(() => {
    localStorage.setItem('activeCategory', activeCategory);
  }, [activeCategory]);

  const handleClick = (category) => {
    setActiveCategory(category);
  };

  return (
    <div>
      <button onClick={() => handleClick('A')}>Category A</button>
      <button onClick={() => handleClick('B')}>Category B</button>
      <button onClick={() => handleClick('C')}>Category C</button>
    </div>
  );
};

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

در نتیجه، useLayoutEffect یک ابزار قدرتمند برای مدیریت خطاهای هیدراتاسیون در Next.js است. استفاده از آن به‌جای useEffect تضمین می‌کند که به‌روزرسانی‌های حالت شما در اولین رندر به درستی روی کلاینت منعکس می‌شوند و از خطای ترسناک «محتوای متن مطابقت نداشت» جلوگیری می‌کند.