Hooks في React

الـ Hooks هي دوال تتيح استخدام الحالة (state) وميزات React الأخرى داخل المكوّنات الدالّية. وقد أُدخلت في React 16.8 لتبسيط إعادة استخدام المنطق البرمجي بين المكوّنات.

الـ Hooks الأساسية

useState

سبق أن تناولناه في الفصل السابق، وفيما يلي تذكير به:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useEffect

يتيح useEffect إدارة الآثار الجانبية (side effects) داخل المكوّنات الدالّية:

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // تأثير يُنفَّذ بعد كل عملية عرض
    fetchUser(userId).then(setUser);
  }, [userId]); // الاعتمادية: يُعاد تنفيذ التأثير إذا تغيّرت userId

  if (!user) return <div>Chargement...</div>;
  return <div>{user.name}</div>;
}

الـ Hooks المخصّصة

تتيح الـ Hooks المخصّصة استخراج منطق المكوّنات إلى دوال قابلة لإعادة الاستخدام:

// useLocalStorage.js
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// الاستخدام
function ThemeSwitcher() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme}
    </button>
  );
}