React Hooks: شرح useState و useEffect بأمثلة عملية

import { useState } from "react";

function Counter() {
  // [القيمة الحالية, دالة التحديث] = useState(القيمة الأولية)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>إعادة</button>
    </div>
  );
}

const [name, setName] = useState("");
const [user, setUser] = useState({ name: "", age: 0 });

// تحديث كائن — انسخه ثم عدّله
setUser({ ...user, age: 30 });

// ❌ قد يسبب مشاكل
setCount(count + 1);

// ✅ آمن دائماً
setCount((prev) => prev + 1);

import { useState, useEffect } from "react";

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

  useEffect(() => {
    // يُنفَّذ بعد كل تحديث لـ userId
    fetch(`/api/users/${userId}`)
      .then((r) => r.json())
      .then(setUser);
  }, [userId]); // ← مصفوفة التبعيات

  if (!user) return <p>جارٍ التحميل...</p>;
  return <h1>{user.name}</h1>;
}

useEffect(() => {
  const timer = setInterval(() => {
    console.log("تكّ كل ثانية");
  }, 1000);

  // هذه الدالة تعمل عند إلغاء المكوّن أو قبل الـ effect التالي
  return () => clearInterval(timer);
}, []);

// ❌ خطأ — useState داخل شرط
function Bad({ active }) {
  if (active) {
    const [x, setX] = useState(0); // خطأ!
  }
}

// ✅ صحيح
function Good({ active }) {
  const [x, setX] = useState(0);
  if (!active) return null;
  return <div>{x}</div>;
}

import { useState } from "react";

function SignupForm() {
  const [form, setForm] = useState({ email: "", password: "" });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const res = await fetch("/api/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error("فشل التسجيل");
      alert("تم بنجاح!");
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
        placeholder="البريد"
      />
      <input
        type="password"
        value={form.password}
        onChange={(e) => setForm({ ...form, password: e.target.value })}
        placeholder="كلمة السر"
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button disabled={loading}>
        {loading ? "جارٍ..." : "تسجيل"}
      </button>
    </form>
  );
}