العودة للمقالات

ما وراء useState: إتقان إدارة الحالة في React في عام 2024

Majd Muhtaseb10‏/06‏/20258 دقيقة

مقدمة

تعتبر أداة useState في React نقطة انطلاق رائعة لإدارة حالة المكون. ومع ذلك، مع نمو تطبيقك، يمكن أن يصبح الأمر صعبًا. تستكشف هذه المقالة تقنيات متقدمة لإدارة الحالة للحفاظ على كود React الخاص بك نظيفًا وقابلاً للصيانة وعالي الأداء.

واجهة برمجة تطبيقات السياق (Context API)

تتيح لك واجهة برمجة تطبيقات السياق مشاركة الحالة عبر شجرة المكونات الخاصة بك دون تمرير الدعائم بشكل متكرر (prop drilling).

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

الاستخدام:

import { useTheme } from './ThemeContext';

const MyComponent = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`my-component ${theme}`}>
      <button onClick={toggleTheme}>تبديل النمط</button>
    </div>
  );
};

المخفضات مع useReducer

تعتبر أداة useReducer مفيدة لإدارة منطق الحالة الأكثر تعقيدًا. إنها مفيدة بشكل خاص عندما تعتمد تحديثات الحالة على الحالة السابقة.

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 (
    <>
      العداد: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>زيادة</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>إنقاص</button>
    </>
  );
}

export default Counter;

مكتبات الطرف الثالث

ضع في اعتبارك استخدام مكتبات مثل Zustand أو Jotai لإدارة الحالة العامة بشكل أبسط مقارنة بـ Redux. تؤكد هذه المكتبات على البساطة وسهولة الاستخدام.

مثال Zustand:

import create from 'zustand'

const useStore = create(set => ({
  bears: 0,
  increaseBears: () => set(state => ({ bears: state.bears + 1 })),
}))

function MyComponent() {
  const bears = useStore(state => state.bears)
  const increaseBears = useStore(state => state.increaseBears)
  return (
    <div>
      {bears} دُببة
      <button onClick={increaseBears}>زيادة الدببة</button>
    </div>
  )
}

خاتمة

يعتمد اختيار حل إدارة الحالة المناسب على مدى تعقيد تطبيقك. useState جيد للمكونات الصغيرة، لكن واجهة برمجة تطبيقات السياق و useReducer ومكتبات الطرف الثالث تقدم حلولاً أكثر قوة مع توسيع نطاق تطبيقك. تذكر أن تختار الأداة التي تناسب احتياجاتك ومعرفة فريقك بشكل أفضل.