React Hooks من الصفر — دليل عملي شامل

import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      العدد: {count}
    </button>
  );
}

// خطأ — قد تقرأ قيمة قديمة
setCount(count + 1);
 
// صح — يضمن القيمة الأحدث دائمًا
setCount((prev) => prev + 1);

const [user, setUser] = useState({ name: "أحمد", age: 25 });
 
// لا تنسَ spread — useState لا يدمج تلقائيًا
setUser((prev) => ({ ...prev, age: 26 }));

useEffect(() => {
  document.title = `${count} إشعار جديد`;
}, [count]);

useEffect(() => {
  const controller = new AbortController();
 
  fetch("/api/data", { signal: controller.signal })
    .then((res) => res.json())
    .then(setData)
    .catch((err) => {
      if (err.name !== "AbortError") console.error(err);
    });
 
  // cleanup — يُشغَّل قبل تشغيل التأثير مجددًا أو عند unmount
  return () => controller.abort();
}, []);

// مشكلة: الدالة تتغير في كل render
function Parent() {
  const [count, setCount] = useState(0);
 
  // هذه الدالة كائن جديد في كل render
  const handleClick = () => console.log("clicked");
 
  return <Child onClick={handleClick} />;
}
 
// حل: useCallback يُبقي نفس مرجع الدالة
function Parent() {
  const [count, setCount] = useState(0);
 
  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []); // لا تعتمد على شيء
 
  return <Child onClick={handleClick} />;
}

function ProductList({ products, filter }: Props) {
  // يُحسب مجددًا فقط عند تغيّر products أو filter
  const filtered = useMemo(
    () => products.filter((p) => p.category === filter),
    [products, filter]
  );
 
  return <ul>{filtered.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

// لا تحتاجه — العملية رخيصة
const doubled = useMemo(() => count * 2, [count]);
 
// تحتاجه — ترتيب وتصفية مصفوفة كبيرة
const sorted = useMemo(
  () => [...items].sort((a, b) => a.price - b.price),
  [items]
);

function AutoFocus() {
  const inputRef = useRef<HTMLInputElement>(null);
 
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
 
  return <input ref={inputRef} placeholder="سيُركّز تلقائيًا" />;
}

function Stopwatch() {
  const [elapsed, setElapsed] = useState(0);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
  const start = () => {
    intervalRef.current = setInterval(() => {
      setElapsed((e) => e + 1);
    }, 1000);
  };
 
  const stop = () => {
    if (intervalRef.current) clearInterval(intervalRef.current);
  };
 
  return (
    <div>
      <p>{elapsed} ثانية</p>
      <button onClick={start}>ابدأ</button>
      <button onClick={stop}>أوقف</button>
    </div>
  );
}

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : initial;
    } catch {
      return initial;
    }
  });
 
  const set = useCallback(
    (newValue: T) => {
      setValue(newValue);
      localStorage.setItem(key, JSON.stringify(newValue));
    },
    [key]
  );
 
  return [value, set] as const;
}
 
// الاستخدام
function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
 
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">فاتح</option>
      <option value="dark">داكن</option>
    </select>
  );
}