العودة للمقالات

ما وراء useEffect: إتقان التأثيرات الجانبية في React باستخدام الإشارات

Majd Muhtaseb22‏/06‏/20258 دقيقة

المشكلة مع useEffect

تعتبر useEffect حجر الزاوية في React لإدارة التأثيرات الجانبية. ومع ذلك، يمكن أن تجعل التبعيات المعقدة وإمكانية إعادة العرض غير الضرورية من الصعب استخدامها بفعالية، مما يؤدي إلى اختناقات الأداء وشفرة مربكة. ضع في اعتبارك هذا السيناريو الشائع:

import { useState, useEffect } from 'react';

function MyComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]);

  return (
    <div>
      {userData ? <p>اسم المستخدم: {userData.name}</p> : <p>جار التحميل...</p>}
    </div>
  );
}

على الرغم من أن هذا يعمل، فإن خطاف useEffect هذا يعيد جلب بيانات المستخدم في كل مرة يتغير فيها userId. بالنسبة للسيناريوهات الأكثر تعقيدًا مع تبعيات متعددة، يصبح من الصعب إدارة منطق useEffect وتصحيحه.

إدخال الإشارات: نهج أبسط

توفر الإشارات نهجًا تفاعليًا لإدارة الحالة، مما يتيح تحديثات دقيقة وتبسيط معالجة التأثيرات الجانبية. توفر مكتبات مثل @preact/signals-react تكاملاً سلسًا مع React.

import { signal, useSignal } from '@preact/signals-react';

const userIdSignal = signal(1); // معرف المستخدم الأولي

function MyComponent() {
  const userData = useSignal(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/api/users/${userIdSignal.value}`);
      const data = await response.json();
      userData.value = data;
    }

    fetchData();
  }, []); // لا حاجة إلى تبعيات!

  return (
    <div>
      {userData.value ? <p>اسم المستخدم: {userData.value.name}</p> : <p>جار التحميل...</p>}
    </div>
  );
}

المزايا الرئيسية:

• تتبع التبعية المباشر: تتعقب الإشارات تلقائيًا المكونات والتأثيرات التي تعتمد عليها. تؤدي التغييرات إلى تشغيل التحديثات الضرورية فقط. في المثال أعلاه، سيتم جلب البيانات مرة أخرى فقط عند تغيير userIdSignal.value.
• useEffect مبسط: لسنا بحاجة إلى إدراج التبعيات في useEffect. تدير الإشارة تتبع التبعية ضمنيًا.

لتغيير userId وتشغيل إعادة الجلب، ما عليك سوى تحديث الإشارة:

userIdSignal.value = 2; // يشغل إعادة الجلب في MyComponent

الإشارات المشتقة والقيم المحسوبة

تتيح لك الإشارات أيضًا إنشاء إشارات مشتقة أو قيم محسوبة يتم تحديثها تلقائيًا بناءً على التغييرات في الإشارات الأخرى:

import { computed } from '@preact/signals-react';

const firstName = signal("John");
const lastName = signal("Doe");

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

console.log(fullName.value); // الإخراج: John Doe

firstName.value = "Jane";

console.log(fullName.value); // الإخراج: Jane Doe (تم التحديث تلقائيًا)

خاتمة

تقدم الإشارات بديلاً قويًا لـ useEffect لإدارة التأثيرات الجانبية في React. من خلال تبني المبادئ التفاعلية، يمكنك كتابة تعليمات برمجية أنظف وأكثر فعالية وسهلة الصيانة. فكر في استكشاف مكتبات الإشارات مثل @preact/signals-react لإطلاق العنان لفوائد إدارة الحالة التفاعلية في مشروع React التالي.