مشكلةتم الحل

السيرفر والتطبيق بيبقوا بطء جداً: حل أيرور Can't perform a React state update on an unmounted component في React

·٤ أغسطس ٢٠٢٦·15 مشاهدة

أنا شغالة على صفحة في React بطلب فيها بيانات من API خارجي باستعمال fetch جوه useEffect أول ما الصفحة تفتح.

المطلوب: جلب البيانات وعرضها في الـ State أول ما تخلص.

المشكلة اللي مقابلاني: لو المستخدم دخل الصفحة والـ API أخد ثانية أو ثانيتين، والمستخدم قرر يخرج من الصفحة فوراً أو يتنقل لصفحة تانية قبل ما الطلب يخلص، الـ Console بيمتلي تحذيرات بالشكل ده:

OTHER

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

المشكلة دي بتخلي أداء الأبلكيشن يسوء مع الوقت وبيحصل استهلاك عالي جداً للذاكرة (Memory Leak).

JavaScript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        // السطر المشتبه فيه: دالة غير متزامنة بتتنفذ حتى لو المكون اتدمر (Unmounted)
        fetch(`https://api.example.com/users/${userId}`)
            .then(res => res.json())
            .then(data => {
                // لو المكون مش موجود في الشاشة حالياً، السطر ده هيضرب التحذير!
                setUser(data); 
            });
    }, [userId]);

    return <div>{user ? user.name : 'جاري التحميل...'}</div>;
}

مشاكل-react أخطاء-useeffect تسريب-الذاكرة-memory-leak مشاكل-فرونت-اند تطوير-الويب جافاسكريبت-مصري

التعليقات (1)

الحل المعتمد

nouvilمنذ 90 يوم

التحذير ده بيحصل لأن طلب الـ API بيستغرق وقت في الشبكة. لو المستخدم قفل الصفحة أو اتنقل لصفحة تانية، React بتدمر المكون ده من الشاشة (Unmount). لكن كود الـ Fetch لما بيخلص بيرجع ينادي دالة setUser لمكون مش موجود أصلًا في الـ DOM، فـ React بتحذرك إن ده بيسبب تسريب للذاكرة (Memory Leak). الحل الصحيح والنهائي: استخدام دالة التنظيف (Cleanup Function) جوه الـ useEffect مع AbortController لإلغاء طلب الـ Network فوراً لو المكون اتدمر قبل ما الاستجابة ترجع:

JavaScript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        // 1. إنشاء أبورت كنترولر لإلغاء الطلب
        const controller = new AbortController();
        const signal = controller.signal;

        fetch(`https://api.example.com/users/${userId}`, { signal })
            .then(res => res.json())
            .then(data => setUser(data))
            .catch(err => {
                if (err.name === 'AbortError') {
                    console.log('تم إلغاء الطلب بنجاح لأن المكون اتدمر');
                } else {
                    // معالجة الأخطاء الثانية عادي
                }
            });

        // 2. دالة التنظيف Cleanup Function بتشتغل أول ما المكون يتدمر
        return () => {
            controller.abort(); // إلغاء طلب الـ Fetch فورا!
        };
    }, [userId]);

    return <div>{user ? user.name : 'جاري التحميل...'}</div>;
}

سجّل دخولك لإضافة تعليق

تسجيل الدخول

السيرفر والتطبيق بيبقوا بطء جداً: حل أيرور Can't perform a React state update on an unmounted component في React

sara

·٤ أغسطس ٢٠٢٦·15 مشاهدة

أنا شغالة على صفحة في React بطلب فيها بيانات من API خارجي باستعمال fetch جوه useEffect أول ما الصفحة تفتح.

المطلوب: جلب البيانات وعرضها في الـ State أول ما تخلص.

OTHER

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

المشكلة دي بتخلي أداء الأبلكيشن يسوء مع الوقت وبيحصل استهلاك عالي جداً للذاكرة (Memory Leak).

JavaScript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        // السطر المشتبه فيه: دالة غير متزامنة بتتنفذ حتى لو المكون اتدمر (Unmounted)
        fetch(`https://api.example.com/users/${userId}`)
            .then(res => res.json())
            .then(data => {
                // لو المكون مش موجود في الشاشة حالياً، السطر ده هيضرب التحذير!
                setUser(data); 
            });
    }, [userId]);

    return <div>{user ? user.name : 'جاري التحميل...'}</div>;
}

import { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); useEffect(() => { // 1. إنشاء أبورت كنترولر لإلغاء الطلب const controller = new AbortController(); const signal = controller.signal; fetch(`https://api.example.com/users/${userId}`, { signal }) .then(res => res.json()) .then(data => setUser(data)) .catch(err => { if (err.name === 'AbortError') { console.log('تم إلغاء الطلب بنجاح لأن المكون اتدمر'); } else { // معالجة الأخطاء الثانية عادي } }); // 2. دالة التنظيف Cleanup Function بتشتغل أول ما المكون يتدمر return () => { controller.abort(); // إلغاء طلب الـ Fetch فورا! }; }, [userId]); return <div>{user ? user.name : 'جاري التحميل...'}</div>; }