React 19: المترجم الجديد والإجراءات وما يعنيه لتطبيقاتك

يُعد React 19 أهم تحديث منذ الـ Hooks، إذ يقدّم مُجمّع React (React Compiler) للتحسين التلقائي، وميزة Actions لتبسيط تعديلات البيانات.

مُجمّع React (The React Compiler)

لا مزيد من التذكير اليدوي (memoization)! يُحسّن المُجمّع مكوّناتك تلقائياً:

// Before: Manual memoization
const MemoizedComponent = React.memo(({ items }) => {
  const filtered = useMemo(() => items.filter(x => x.active), [items]);
  const handleClick = useCallback(() => console.log(filtered), [filtered]);
  return <List items={filtered} onClick={handleClick} />;
});

// After: React 19 - compiler handles it
function Component({ items }) {
  const filtered = items.filter(x => x.active);
  const handleClick = () => console.log(filtered);
  return <List items={filtered} onClick={handleClick} />;
}

Actions

تُبسّط ميزة Actions التعامل مع النماذج وتعديلات البيانات:

function UpdateProfile() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const result = await updateProfile(formData);
      return result;
    },
    null
  );

  return (
    <form action={formAction}>
      <input name="name" />
      <button disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

خطّاف ()use

اقرأ الـ Promises والـ Context بشكل شرطي:

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return comments.map(c => <Comment key={c.id} {...c} />);
}