الخطافات في React: شرح كل خطاف بأمثلة حية

الخطافات في React دوال تبدأ أسماؤها بـ use تتيح لمكوّن الدالة استخدام ميزات React: useState لتذكّر قيمة، وuseEffect لتشغيل كود بعد العرض، وuseRef للاحتفاظ بعقدة DOM، وuseContext لقراءة بيانات مشتركة. تستدعيها في أعلى مكوّنك، وتحتفظ React بقيمها بين مرات العرض.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

أربعة خطافات تعمل معًا هنا. يخزن useState النص، ويشير useRef إلى الحقل ليتمكن الزر من تركيزه، ويحتفظ useMemo بالقائمة المرشحة حتى يتغير الاستعلام، ويسجّل useEffect بعد كل عرض تغيّر فيه الاستعلام. اكتب an وراقب Console: سطر لكل ضغطة مفتاح، بعد أن تتحدث القائمة.

لماذا وُجدت الخطافات

قبل React 16.8 كان المكوّن الذي يحتاج إلى حالة أو كود دورة حياة يجب أن يكون صنفًا. وكان منطق الميزة الواحدة مقسمًا بين componentDidMount وcomponentDidUpdate وcomponentWillUnmount، وكانت مشاركته بين المكوّنات تعني mixins (التي لم تعمل قط مع صيغة الأصناف)، أو مكوّنات عليا، أو render props، وكلها تغلّف شجرتك بطبقات إضافية.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

مع الخطافات تعيش الميزة نفسها في مكان واحد: يبدأ التأثير المؤقت وتوقفه دالة التنظيف الخاصة به.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

أخفِ الساعة فتطبع Console السطر timer stopped: شغّلت React دالة التنظيف عندما غادر Clock الشاشة. أظهرها من جديد فيبدأ مؤقت جديد. ما زالت مكوّنات الأصناف تعمل في React 19، لكن الكود الجديد يستخدم الخطافات.

كل الخطافات المدمجة

تجمع React 19.2 خطافاتها حسب ما تعطيه للمكوّن. ستستخدم المجموعتين الأوليين كل يوم، والباقي عندما تستدعيه مشكلة محددة.

وصلت use وuseActionState وuseOptimistic وuseFormStatus مع React 19، وأصبح useEffectEvent مستقرًا في 19.2. وكل خطاف آخر في القائمة يعمل في React 18 أيضًا.

الحالة تعيد العرض، والمراجع لا

ليس كل خطاف يطلق عرضًا. useState وuseReducer يفعلان: غيّر قيمتهما فترسم React المكوّن من جديد. أما useRef فيسلّمك كائنًا يمكنك تغيير حقله current بحرية، ولا تعيد React العرض بسببه أبدًا. وهذا يجعله المكان المناسب لمعرّف مؤقت، أو قيمة سابقة، أو عدد لا تعرضه الشاشة.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

يحمل useReducer السلة ويحمل useState الملاحظة؛ وكلاهما يسبب عرضًا عندما يتغير، ويسجّل التأثير سطرًا واحدًا لكل عرض. ويغيّر التأثير أيضًا commits.current، لكن ذلك التغيير لا يسبب عرضًا خاصًا به أبدًا، فلا يدخل السجل في حلقة. يُحدَّث العدد في تأثير لا في جسم المكوّن لأن الجسم ينبغي ألا يغيّر شيئًا أثناء العرض.

قواعد الخطافات

يتبع كل خطاف قاعدتين:

1. استدعِ الخطافات في المستوى الأعلى من مكوّنك، ولا تستدعها أبدًا داخل شرط أو حلقة أو دالة متداخلة.
2. لا تستدعِ الخطافات إلا من مكوّنات الدوال أو من خطافاتك المخصصة.

لا تعرف React الخطافات بأسمائها. بل تعرفها بالترتيب الذي تستدعيها به، وتتوقع أن يكون هذا الترتيب نفسه في كل عرض. خطاف داخل if سيزيح كل خطاف بعده. تُظهر صفحة قواعد الخطافات ما الذي ينكسر وكيف تصلحه. وuse هو الاستثناء الوحيد: يمكن استدعاؤه داخل شرط.

أول خطاف مخصص لك

عندما يحتاج مكوّنان إلى المنطق ذي الحالة نفسه، انقله إلى دالة يبدأ اسمها بـ use. يمكن لتلك الدالة استدعاء أي خطاف آخر. ويحصل كل مكوّن يستدعيها على حالته الخاصة.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

يشغّل العدّادان الخطاف نفسه، لكن النقر على أحدهما يترك الآخر وشأنه: الخطاف المخصص يشارك المنطق لا الحالة. أضف دالة decrement إلى useCounter وزرًا يستدعيها، فيحصل عليها العدّادان معًا. وتوجد أنماط أخرى (useToggle وuseDebounce وuseLocalStorage) في صفحة الخطافات المخصصة.

أي خطاف تختار

• ينبغي أن تتغير الشاشة عندما تتغير قيمة: useState، أو useReducer عندما تحدّث أحداث كثيرة الحالة نفسها.
• تحتاج إلى التواصل مع شيء خارج React (مؤقت، أو اشتراك، أو طلب): useEffect.
• تحتاج إلى عقدة DOM أو قيمة لا تعرضها الشاشة: useRef.
• تحتاج مكوّنات كثيرة في عمق الشجرة إلى القيمة نفسها: useContext.
• العرض بطيء بسبب عملية حسابية واحدة أو لأن ابنًا محفوظًا يُعاد عرضه: useMemo وuseCallback. يستطيع React Compiler إضافة هذا الحفظ لك، لكن كتابته يدويًا ما زالت تعمل وما زالت شائعة.
• الكتابة تبدو متأخرة لأن التحديث الذي خلفها ثقيل: useTransition أو useDeferredValue.