نحوه ساخت قلاب React که به روزرسانی های چند حالت را به طور خودکار دسته بندی می کند

در حال حاضر به روزرسانی های خود را در اختیار شما قرار می دهد ، اما در خارج از آن – مانند در setTimeout یا Promise تماس تلفنی – ممکن است چندین رندر ضربه بزنید. در اینجا نحوه ایجاد یک قلاب سفارشی که در همه جا جمع می شود ، به حداقل می رساند و به حداقل می رساند و باعث صرفه جویی در عملکرد بدون نیاز به کتابخانه های خارجی مانند Recoil یا Jotai می شود.

چرا دسته بندی دستی مهم است

از مواردی استفاده کنید که دسته بندی به آنها کمک می کند:

• فرم های پیچیده با بسیاری از زمینه ها که به ترتیب به روز شده اند
• انیمیشن ها یا انتقال ایالتی که به وعده ها یا تایمرها گره خورده است
• بهینه سازی درختان مؤلفه عمیقاً تو در تو

مرحله 1: یک قلاب UseBatchState ایجاد کنید

// useBatchState.js
import { useState, useRef } from "react";
import { unstable_batchedUpdates } from "react-dom"; // Works in React 18+

export function useBatchState(initialState) {
  const [state, setState] = useState(initialState);
  const pending = useRef([]);

  function batchUpdate(updater) {
    pending.current.push(updater);
  }

  function flush() {
    if (pending.current.length === 0) return;
    unstable_batchedUpdates(() => {
      setState(prev => {
        return pending.current.reduce((acc, fn) => fn(acc), prev);
      });
    });
    pending.current = [];
  }

  return [state, batchUpdate, flush];
}

مرحله 2: با استفاده از قلاب

// ExampleComponent.js
import { useBatchState } from "./useBatchState";

function ExampleComponent() {
  const [count, batchUpdate, flush] = useBatchState(0);

  function complexIncrement() {
    batchUpdate(prev => prev + 1);
    batchUpdate(prev => prev + 1);
    batchUpdate(prev => prev + 1);
    flush(); // Forces all updates to apply at once
  }

  return (
    

      
Count: {count}
      Increment by 3
    
  );
}

export default ExampleComponent;

مرحله 3: یادداشت های React 18+

REACT 18 دسته بیشتر چیزها را به طور پیش فرض می کند ، اما قلاب های سفارشی مانند این هنوز کنترل مطلق را برای موارد نادر یا کد های میراث که به آن احتیاج دارند ، به شما می دهد.

جوانب مثبت و منفی

✅ جوانب مثبت

• کمتر رندر = UI سریعتر برای تعامل حالت پیچیده
• هیچ وابستگی خارجی وجود ندارد
• در مرزهای رویداد Async کار می کند

⚠ منفی

• گرگرفتگی دستی مورد نیاز است – اگر آن را فراموش کنید ، به روزرسانی های بی نظیر خواهید داشت
• می تواند موارد ساده را بیش از حد جمع کند – بیش از حد مورد استفاده قرار نگیرید مگر اینکه پروفایل می گوید مورد نیاز است

🚀 گزینه های دیگر

• REACT 18 BATCHING AUTOMATIC: برای بیشتر موارد از جعبه خارج می شود ، اما برای همه جریان های Async 100 ٪ نیست.
• کتابخانه های دولتی مانند Jotai ، Recoil: حالت ریز دانه را به صورت بومی با اتم/انتخاب کننده های دسته دار کنترل کنید.

خلاصه

دسته بندی هوشمند هنگام بهینه سازی اجزای مهم عملکرد ، به شما ابرقدرت ها می دهد. هنگام پروفایل ، از آن استفاده کنید که رندرهای زباله را نشان می دهد – نه فقط به این دلیل که می توانید.

اگر این موضوع را مفید دیدید ، می توانید از من در اینجا پشتیبانی کنید: buymeacoffee.com/hexshift