React 19 ميزة جديدة: شرح المترجم ومكونات الخادم والإجراءات

// React 18: Manual memoization
const ExpensiveComponent = memo(({ data }) => {
  const processed = useMemo(() => processData(data), [data]);
  const handleClick = useCallback(() => onClick(data), [data, onClick]);
  return <div onClick={handleClick}>{processed}</div>;
});

// React 19: Compiler handles it automatically
function ExpensiveComponent({ data }) {
  const processed = processData(data);
  return <div onClick={() => onClick(data)}>{processed}</div>;
}

// app/users/page.tsx — runs on server, no JS sent to client
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.query('SELECT * FROM users LIMIT 10');
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

async function createUser(formData: FormData) {
  'use server';
  const name = formData.get('name') as string;
  await db.insert('users', { name });
  revalidatePath('/users');
}

export default function CreateUserForm() {
  return (
    <form action={createUser}>
      <input name="name" placeholder="Name" />
      <button type="submit">Create</button>
    </form>
  );
}

import { useActionState } from 'react';

async function signUp(prevState, formData) {
  const email = formData.get('email');
  try {
    await createAccount(email);
    return { success: true };
  } catch (e) {
    return { error: e.message };
  }
}

function SignUpForm() {
  const [state, action, isPending] = useActionState(signUp, null);
  return (
    <form action={action}>
      <input name="email" type="email" />
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p>Account created!</p>}
      <button disabled={isPending}>
        {isPending ? 'Creating...' : 'Sign Up'}
      </button>
    </form>
  );
}

import { use, Suspense } from 'react';

async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

function UserCard({ userPromise }) {
  const user = use(userPromise);  // Suspense-aware
  return <div>{user.name}</div>;
}

// In parent:
<Suspense fallback={<Skeleton />}>
  <UserCard userPromise={fetchUser(userId)} />
</Suspense>

const ThemeContext = createContext('light');

// React 19: Direct
function App() {
  return (
    <ThemeContext value="dark">
      <Page />
    </ThemeContext>
  );
}

// React 18: Required .Provider
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Page />
    </ThemeContext.Provider>
  );
}