الوضع الصارم في React: لماذا تعمل التأثيرات والعروض مرتين

<StrictMode> مكوّن في React يفعّل فحوصًا إضافية لكل ما بداخله، في التطوير فقط. يعرض كل مكوّن مرتين، ويشغّل عند التركيب إعداد كل تأثير ثم تنظيفه ثم إعداده من جديد، ويشغّل دوال المرجع مرتين، ويحذّر من الواجهات المُهملة. ولهذا «يعمل useEffect مرتين» في التطوير. أما في بناء الإنتاج فلا يفعل شيئًا.

تفعّله بتغليف تطبيقك، عادة في main.jsx:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

تعمل المعاينات في هذه الصفحة مثل بناء الإنتاج، فلن يكون لـ StrictMode أثر مرئي فيها. بدلًا من ذلك، يحتوي كل مثال أدناه على نوع الخطأ الذي وُجد StrictMode لالتقاطه، ويتيح لك إطلاقه يدويًا. هنا يضيف تأثير مستمع نقرات على document ولا يزيله أبدًا. أخفِ اللوحة وأظهرها مرتين، ثم انقر في الصفحة.

import { useEffect, useState } from 'react';

let listeners = 0;

function ClickLogger() {
    useEffect(() => {
        listeners += 1;
        const id = listeners;
        document.addEventListener('click', () => console.log(`listener ${id} saw a click`));
        // Bug: no cleanup, so the listener stays after unmount
    }, []);

    return <p>Logging every click on the page.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} the logger</button>
            {show && <ClickLogger />}
        </div>
    );
}

كل Show يضيف مستمعًا آخر، ولا يُزال أي منها، فتسجّل النقرة الواحدة مرة لكل تركيب. هذا تسرّب قد يسببه مستخدم بفتح لوحة وإغلاقها. وكان StrictMode سيُظهره من أول تركيب: في التطوير يركّب ثم يزيل ثم يركّب من جديد، فكنت سترى سطري سجل لكل نقرة قبل أن تلمس الزر.

التأثيرات: إعداد، تنظيف، إعداد

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

إصلاح المسجّل دالة تنظيف تزيل الدالة نفسها التي أضافها:

import { useEffect, useState } from 'react';

function ClickLogger() {
    useEffect(() => {
        function onClick() {
            console.log('the one listener saw a click');
        }
        document.addEventListener('click', onClick);
        console.log('setup: listener added');
        return () => {
            document.removeEventListener('click', onClick);
            console.log('cleanup: listener removed');
        };
    }, []);

    return <p>Logging clicks.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} the logger</button>
            {show && <ClickLogger />}
        </div>
    );
}

بدّل كما تشاء: كل نقرة تسجّل سطرًا واحدًا ما دام المسجّل ظاهرًا. ومع StrictMode في التطوير ستبدأ وحدة التحكم بـ setup وcleanup وsetup، وسيظل التطبيق يتصرف بشكل صحيح. هذا التسلسل علامة على تأثير سليم، لا مشكلة عليك إطفاؤها.

تأثيرات شائعة تحتاج إلى تنظيف: مستمعو الأحداث، وsetInterval وsetTimeout، والاشتراكات، واتصالات WebSocket أو المحادثة، والطلبات التي ينبغي تجاهل ردها إذا زال المكوّن. تُظهر صفحة useEffect نمط التنظيف لكل منها.

مرات العرض: استدعاء مزدوج

يستدعي StrictMode أيضًا دالة مكوّنك مرتين في كل عرض (والدوال التي تمررها إلى useState وuseMemo وuseReducer، وconstructor وrender وshouldComponentUpdate في الأصناف). تحتفظ React بنتيجة استدعاء واحد وترمي الآخر. المكوّن النقي يُرجع JSX نفسها في المرتين، فلا يتغير شيء.

أما المكوّن الذي يغيّر شيئًا خارجه أثناء العرض فليس نقيًا، واستدعاؤه مرتين يجعل التغيير يحدث مرتين. هذا المكوّن يضيف مدخل "rendered at" إلى مصفوفة يستقبلها كـ prop:

import { useState } from 'react';

const log = ['initial entry'];

function History({ entries }) {
    // Bug: changing a prop during render
    entries.push(`rendered at ${entries.length}`);
    return (
        <ul>
            {entries.map((e, i) => (
                <li key={i}>{e}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Re-render ({count})</button>
            <History entries={log} />
        </div>
    );
}

كل إعادة عرض تضيف مدخلًا لم يطلبه أحد. هنا لا تلاحظ إلا بعد النقر. ومع StrictMode كان العرض الأول سيُظهر أصلًا مدخلين جديدين بدلًا من واحد. والإصلاح هو الحساب أثناء العرض دون تعديل: const shown = [...entries, 'extra'].

تضيف React 19 تفصيلًا واحدًا: أثناء العرض المزدوج، يعيد useMemo وuseCallback استخدام النتيجة من الاستدعاء الأول بدلًا من حسابها مرتين.

دوال المرجع

منذ React 19، يشغّل StrictMode أيضًا دوال المرجع مرتين عند التركيب: ربط، ثم تنظيف، ثم ربط. دالة المرجع التي تضيف مستمعًا أو تسجّل العقدة في مكان ما تحتاج إلى إرجاع دالة تنظيف، تمامًا مثل التأثير:

<div
    ref={(node) => {
        const observer = new ResizeObserver(onResize);
        observer.observe(node);
        return () => observer.disconnect();
    }}
/>

تحذيرات الواجهات المُهملة

يحذّر StrictMode من الواجهات في طريقها إلى الزوال، في مكوّنات الأصناف غالبًا، مثل توابع دورة الحياة القديمة UNSAFE_componentWillMount وUNSAFE_componentWillReceiveProps وUNSAFE_componentWillUpdate. وبعض الواجهات التي كان يحذّر منها، مثل مراجع النصوص وfindDOMNode، حُذفت من React 19 كليًا.

تفعيله لجزء من التطبيق

<StrictMode> مكوّن عادي، فيمكنك تغليف جزء من الشجرة فقط. وهذا يفيد عند تبنّيه في تطبيق كبير: ابدأ بالشاشات الجديدة ثم وسّع.

function App() {
    return (
        <>
            <Header />
            <StrictMode>
                <Sidebar />
                <Content />
            </StrictMode>
            <Footer />
        </>
    );
}

يحصل Sidebar وContent (وكل ما يعرضانه) على الفحوص؛ ولا يحصل عليها Header وFooter. ولا توجد طريقة لإطفائه لشجرة فرعية داخل جزء صارم.

أين يكون مفعّلًا افتراضيًا:

• Vite: يغلّف قالب React المكوّن <App /> بـ <StrictMode> في main.jsx.
• Next.js: يفعّله App Router افتراضيًا؛ ويتحكم فيه reactStrictMode في next.config.js.

لا يفعل شيئًا في الإنتاج

يتجاهل بناء الإنتاج <StrictMode>: عرض واحد، وتشغيل واحد للتأثير، ولا تحذيرات. لذا لا تكلّف الاستدعاءات المزدوجة مستخدميك شيئًا أبدًا، ولا سبب لحذف المغلّف قبل النشر.

إذا كسر تأثير مزدوج شيئًا في التطوير، مثل طلب يُرسل مرتين أو حدث تحليلات يُسجَّل مرتين، فتلك معلومة. وفي معظم الأحيان يكون الإصلاح دالة تنظيف (علامة ignore لطلب، أو قطع اتصال لاتصال). أما لشيء يجب فعلًا أن يحدث مرة واحدة لكل تحميل للتطبيق، مثل تهيئة SDK، فشغّله خارج أي مكوّن على مستوى الوحدة، أو احمِه بعلامة على مستوى الوحدة.

let didInit = false;

function App() {
    useEffect(() => {
        if (didInit) return;
        didInit = true;
        initAnalytics(); // runs once per page load, even in StrictMode
    }, []);
}

تجنّب الحل الالتفافي الشائع بمرجع يتخطى التشغيل الثاني للتأثير. فهو يخفي التحذير دون إصلاح التنظيف المفقود، ويعود الخطأ في أول مرة يُزال فيها المكوّن ويُركَّب من جديد فعلًا، كما يحدث مع المسجّل أعلاه.