وضعیت در React – مدیریت داده‌های پویا با useState و باز-render شدن کامپوننت‌ها

مقدمه

در React، پراپس‌ها فقط برای انتقال داده از والد به فرزند استفاده می‌شوند و نباید تغییر کنند. اما برای مدیریت داده‌هایی که در طول زمان تغییر می‌کنند، از state استفاده می‌کنیم. این داده‌ها با hook معروف useState تعریف می‌شوند و با تغییر آن‌ها، کامپوننت مربوطه و فرزندانش دوباره render می‌شوند.

نمونه‌ای از وضعیت در کامپوننت Search

فرض کنید می‌خواهیم متنی که کاربر در فیلد ورودی وارد می‌کند، در کنار آن نمایش داده شود. روش اولیه (غیرمؤثر):

let searchTerm = '';
const handleChange = (event) => {
  searchTerm = event.target.value;
};

این روش کار نمی‌کند چون React نمی‌داند که searchTerm باید وضعیت باشد. راه‌حل درست:

import * as React from 'react';

const Search = () => {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    
      Search: 
      
      Searching for {searchTerm}.
    
  );
};

توضیح useState

تابع useState یک مقدار اولیه دریافت می‌کند و آرایه‌ای با دو مقدار بازمی‌گرداند:

مقدار اول: وضعیت فعلی
مقدار دوم: تابعی برای به‌روزرسانی وضعیت

با هر بار تغییر وضعیت، کامپوننت مربوطه دوباره render می‌شود و مقدار جدید در JSX نمایش داده می‌شود.

تفاوت render و re-render

هر کامپوننت در React یک بار اولیه render می‌شود. سپس با هر تغییر در وضعیت یا پراپس‌ها، کامپوننت و فرزندانش دوباره render می‌شوند. می‌توانید با console.log() در هر کامپوننت، این رفتار را مشاهده کنید.

نکات مهم درباره useState

می‌توان چندین useState در یک یا چند کامپوننت استفاده کرد.
وضعیت می‌تواند رشته، عدد، آرایه یا آبجکت باشد.
در محیط توسعه، ممکن است logها دوبار نمایش داده شوند (به‌خاطر StrictMode).
React وضعیت را در حافظه داخلی نگه می‌دارد و با garbage collection پاک‌سازی می‌کند.

جمع‌بندی

وضعیت در React ابزاری قدرتمند برای مدیریت داده‌های پویا است. با استفاده از useState می‌توان داده‌ها را تعریف، به‌روزرسانی، و در رابط کاربری نمایش داد. این تغییرات باعث باز-render شدن کامپوننت‌ها می‌شوند و تجربه‌ای تعاملی برای کاربر فراهم می‌کنند.