4 اشتباه هوک useState که باید در React از آنها اجتناب کنید

React.js با رویکرد منحصر به فرد خود برای مدیریت استیت درون کامپوننت ها به سنگ بنای توسعه وب مدرن تبدیل شده است. یک هوک رایج، useState، اساسی است اما اغلب مورد سوء استفاده قرار می گیرد. درک و اجتناب از این اشتباهات رایج، هم برای مبتدیان و هم برای توسعه دهندگان با تجربه که هدفشان ایجاد برنامه های کارآمد و بدون باگ است، بسیار مهم است.

این مقاله از آنوفل به چهار اشتباه مهم در هنگام استفاده از useState در React می پردازد. بیایید با هم مهارت های React خود را تقویت کنیم!

اشتباه 1: فراموش کردن در نظر گرفتن استیت قبلی

هنگام کار با هوک useState React، یک اشتباه رایج این است که در به روز رسانی آخرین استیت آن را در نظر نمی گیریم. این نظارت می‌تواند منجر به رفتارهای غیرمنتظره شود، به‌ویژه زمانی که با به‌روزرسانی‌های سریع یا چندگانه سر و کار دارید.

بیایید تصور کنیم که در React در حال ساخت یک شمارنده هستید. هدف شما این است که با هر بار کلیک کردن روی یک دکمه تعداد آن را افزایش دهید. یک رویکرد ساده ممکن است اضافه کردن 1 به مقدار وضعیت فعلی باشد. با این حال، این می تواند مشکل ساز باشد.

برای مثال:

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1); // Might not always work as expected
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterComponent;

در کد بالا، incrementCounter شمارنده را بر اساس مقدار فعلی آن به روز می کند. این به نظر ساده است اما می تواند منجر به باگ شود. React ممکن است چندین تماس setCounter را با هم جمع کند، یا به‌روزرسانی‌های استیت دیگر ممکن است تداخل داشته باشند و در نتیجه شمارنده هر بار به درستی به‌روزرسانی نشود.

تصحیح کد:

برای جلوگیری از این مشکل، از فرم فانکشن برای متد setCounter استفاده کنید. این نسخه تابعی را به عنوان آرگومان خود می گیرد که React آن را با آخرین مقدار استیت فراخوانی می کند. این تضمین می کند که شما همیشه با آخرین مقدار استیت کار می کنید.

برای مثال:

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(prevCounter => prevCounter + 1); // Correctly updates based on the most recent state
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterComponent;

در این کد تصحیح شده، incrementCounter از یک تابع برای به روز رسانی استیت استفاده می کند. این تابع آخرین وضعیت (prevCounter) را دریافت می کند و وضعیت به روز شده را برمی گرداند. این رویکرد بسیار قابل اعتمادتر است، به خصوص زمانی که به روز رسانی ها به سرعت یا چندین بار پشت سر هم انجام می شود.

برای آشنایی با کد نویسی تمیز در ری اکت این مقاله را بررسی کنید.

اشتباه 2: نادیده گرفتن تغییرناپذیری استیت

در React، استیت باید غیرقابل تغییر در نظر گرفته شود. یک اشتباه رایج جهش مستقیم استیت است، به خصوص با ساختارهای داده پیچیده مانند آبجکت و آرایه ها.

این رویکرد معیوب را با یک آبجکت استیت در نظر بگیرید:

import React, { useState } from 'react';

const ProfileComponent = () => {
  const [profile, setProfile] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    profile.age = 31; // Directly mutating the state
    setProfile(profile);
  };

  return (
    <div>
      <p>Name: {profile.name}</p>
      <p>Age: {profile.age}</p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
};

export default ProfileComponent;

این کد به اشتباه مستقیماً آبجکت پروفایل را جهش می دهد. چنین جهش‌هایی باعث ایجاد رندرهای مجدد نمی‌شوند و منجر به رفتارهای غیرقابل پیش‌بینی می‌شوند.

تصحیح کد:
برای حفظ تغییرناپذیری همیشه هنگام به‌روزرسانی استیت، یک آبجکت یا آرایه جدید ایجاد کنید. برای این منظور از عملگر spread استفاده کنید.

import React, { useState } from 'react';

const ProfileComponent = () => {
  const [profile, setProfile] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setProfile({...profile, age: 31}); // Correctly updating the state
  };

  return (
    <div>
      <p>Name: {profile.name}</p>
      <p>Age: {profile.age}</p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
};

export default ProfileComponent;

در کد اصلاح شده، updateAge از عملگر spread برای ایجاد یک آبجکت پروفایل جدید با سن به روز شده استفاده می کند و تغییر ناپذیری استیت را حفظ می کند.

برای آشنایی با ری اکت 19 این مقاله را بررسی کنید.

اشتباه 3: درک نادرست به روز رسانی های ناهمزمان

به‌روزرسانی‌های استیت React از طریق useState ناهمزمان هستند. این اغلب منجر به سردرگمی می‌شود، به‌ویژه زمانی که به‌روزرسانی‌های چند استیتی پشت سر هم انجام می‌شوند. توسعه دهندگان ممکن است انتظار داشته باشند که استیت بلافاصله پس از تماس setState تغییر کند، اما در واقعیت، React این به‌روزرسانی‌ها را به دلایل عملکرد دسته‌ای می‌کند.

بیایید به یک سناریوی رایج نگاه کنیم که در آن این سوء تفاهم می تواند باعث ایجاد مشکلات شود:

import React, { useState } from 'react';

const AsyncCounterComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
    setCount(count + 1);
    // Developer expects count to be incremented twice
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default AsyncCounterComponent;

در این مثال، توسعه دهنده قصد دارد تعداد را دو بار افزایش دهد. با این حال، به دلیل ماهیت ناهمزمان به‌روزرسانی‌های استیت، هر دو فراخوانی setCount بر اساس یک استیت اولیه هستند و در نتیجه تعداد فقط یک بار افزایش می‌یابد.

تصحیح کد:

برای مدیریت صحیح به‌روزرسانی‌های ناهمزمان، از فرم به‌روزرسانی فانکشنی برای setCount استفاده کنید. این تضمین می کند که هر به روز رسانی بر اساس آخرین استیت است.

import React, { useState } from 'react';

const AsyncCounterComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    // Now each update correctly depends on the most recent state
  };
  // Optional: Use useEffect to see the updated state
  useEffect(() => {
    console.log(count); // 2
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default AsyncCounterComponent;

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

چه زمانی نباید از هوک useMemo استفاده کنیم؟ برای درک این هوک می توانید این مقاله را بررسی کنید.

اشتباه 4: استفاده نادرست از استیت برای داده های مشتق شده

یک خطای مکرر استفاده از استیت برای داده‌هایی است که می‌توانند از استیت یا props موجود مشتق شوند. این استیت اضافی می تواند منجر به کدهای پیچیده و مستعد خطا شود.

مثلا:

import React, { useState } from 'react';

const GreetingComponent = ({ name }) => {
  const [greeting, setGreeting] = useState(`Hello, ${name}`);

  return (
    <div>{greeting}</div>
  );
};

export default GreetingComponent;

در اینجا استیت greeting غیر ضروری است زیرا می تواند مستقیماً از نام گرفته شود.

تصحیح کد:
به جای استفاده از استیت، داده ها را مستقیماً از استیت یا props موجود استخراج کنید.

import React from 'react';

const GreetingComponent = ({ name }) => {
  const greeting = `Hello, ${name}`; // Directly derived from props

  return (
    <div>{greeting}</div>
  );
};

export default GreetingComponent;

در کد تصحیح‌شده، greeting مستقیماً از نام prop محاسبه می‌شود، که کامپوننت را ساده می‌کند و از مدیریت غیرضروری استیت اجتناب می‌کند.

برای آشنایی کتابخانه مدیریت استیت ریداکس این مقاله را بررسی کنید.

نتیجه

استفاده موثر از هوک useState در React برای ساخت برنامه های کاربردی قابل اعتماد و کارآمد بسیار مهم است. با درک و اجتناب از اشتباهات رایج، مانند نادیده گرفتن استیت قبلی، مدیریت نادرست تغییرناپذیری استیت، نادیده گرفتن به روز رسانی های ناهمزمان، و اجتناب از استیت اضافی برای داده های مشتق شده، می توانید از رفتار کامپوننت نرم تر و قابل پیش بینی تر اطمینان حاصل کنید. برای بهبود سفر توسعه React و ایجاد برنامه‌های کاربردی قوی‌تر، این اطلاعات بینش را در ذهن داشته باشید.