دوره “Managing State in React 18” یک مسیر یادگیری ساختاریافته را ارائه می‌دهد که شامل مباحث کلیدی زیر است:

• مقدمه‌ای بر مدیریت وضعیت: در این بخش، با مفاهیم پایه مدیریت وضعیت در React آشنا می‌شوید. این شامل بررسی State، Props، و اهمیت مدیریت صحیح داده‌ها در برنامه‌های React است.
• مدیریت وضعیت محلی با useState و useReducer: این بخش به شما نحوه استفاده از هوک‌های useState و useReducer را برای مدیریت وضعیت در کامپوننت‌های فردی آموزش می‌دهد. مثال‌های عملی نشان می‌دهند چگونه می‌توان از این هوک‌ها برای ایجاد رابط‌های کاربری پویا و تعاملی استفاده کرد.
• مدیریت وضعیت سراسری با Context API: Context API یک روش داخلی React برای به اشتراک گذاشتن وضعیت بین کامپوننت‌ها بدون نیاز به ارسال دستی props از طریق هر سطح است. در این بخش، نحوه استفاده از Context API برای ایجاد وضعیت سراسری و مدیریت داده‌ها در کل برنامه را یاد می‌گیرید.
• استفاده از کتابخانه‌های مدیریت وضعیت (Redux, Zustand, Jotai): این بخش به بررسی کتابخانه‌های محبوب مدیریت وضعیت مانند Redux، Zustand و Jotai می‌پردازد. شما با مزایا و معایب هر کتابخانه آشنا می‌شوید و یاد می‌گیرید چگونه آن‌ها را در پروژه‌های React خود ادغام کنید.
• React Query برای مدیریت داده‌های Server State: React Query یک کتابخانه قدرتمند برای مدیریت داده‌هایی است که از یک سرور دریافت می‌شوند. این بخش به شما نحوه استفاده از React Query را برای واکشی، ذخیره و به‌روزرسانی داده‌های سرور در برنامه‌های React آموزش می‌دهد.
• بهینه‌سازی عملکرد با استفاده از Memoization و useCallback: این بخش به بررسی تکنیک‌های بهینه‌سازی عملکرد مانند Memoization و useCallback می‌پردازد. شما یاد می‌گیرید چگونه از این تکنیک‌ها برای جلوگیری از رندر مجدد غیرضروری کامپوننت‌ها و بهبود عملکرد کلی برنامه استفاده کنید.
• آزمون واحد و آزمون یکپارچه: در این بخش، نحوه نوشتن آزمون‌های واحد و یکپارچه برای کامپوننت‌ها و منطق مدیریت وضعیت خود را یاد می‌گیرید. این شامل استفاده از ابزارهایی مانند Jest و React Testing Library است.

شرکت در دوره “Managing State in React 18” فواید متعددی را برای توسعه‌دهندگان React به ارمغان می‌آورد:

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

برای شرکت در دوره “Managing State in React 18″، دانش پایه‌ای از مفاهیم زیر توصیه می‌شود:

• دانش پایه HTML، CSS و JavaScript: آشنایی با ساختار HTML، استایل‌دهی با CSS و مفاهیم پایه JavaScript ضروری است.
• آشنایی با React: قبل از شروع این دوره، باید با مفاهیم React مانند کامپوننت‌ها، Props، State و JSX آشنا باشید.
• دانش ES6+: دانش ES6+ (ECMAScript 2015+) برای درک کد مورد استفاده در دوره ضروری است.
• آشنایی با ابزارهای توسعه React: آشنایی با ابزارهایی مانند npm یا yarn، و همچنین ابزارهای توسعه مرورگر، مفید خواهد بود.

مدیریت وضعیت محلی با useState

هوک useState ساده‌ترین راه برای مدیریت وضعیت در یک کامپوننت React است. برای مثال، فرض کنید می‌خواهیم یک دکمه شمارنده ساده ایجاد کنیم:

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default Counter;

در این مثال، useState(0) مقدار اولیه شمارنده را 0 قرار می‌دهد. setCount تابعی است که برای به‌روزرسانی مقدار شمارنده استفاده می‌شود.

مدیریت وضعیت پیچیده با useReducer

برای مدیریت وضعیت پیچیده‌تر، می‌توان از هوک useReducer استفاده کرد. useReducer شبیه به Redux عمل می‌کند و به شما امکان می‌دهد وضعیت را با استفاده از یک تابع reducer به‌روزرسانی کنید. برای مثال:

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}
export default Counter;

در این مثال، reducer تابعی است که نحوه به‌روزرسانی وضعیت را بر اساس یک action مشخص می‌کند. dispatch تابعی است که برای ارسال action به reducer استفاده می‌شود.

مدیریت وضعیت سراسری با Context API

Context API به شما امکان می‌دهد وضعیت را در کل درخت کامپوننت‌ها به اشتراک بگذارید. برای مثال:

import React, { createContext, useContext, useState } from 'react';
const CountContext = createContext();
function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}
function useCount() {
  return useContext(CountContext);
}
function Counter() {
  const { count, setCount } = useCount();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}
export default App;

در این مثال، CountContext یک context جدید ایجاد می‌کند. CountProvider یک کامپوننت است که وضعیت شمارنده را فراهم می‌کند. useCount یک هوک سفارشی است که برای دسترسی به وضعیت شمارنده از داخل کامپوننت‌ها استفاده می‌شود.