وضعیت در 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 شدن کامپوننت‌ها می‌شوند و تجربه‌ای تعاملی برای کاربر فراهم می‌کنند.