هل ال useEffect عندما أقوم بوضع داتا متغيرة داخل الاراى الخاصة به .. هل هذه الداتا المتغيرة اللتى تؤدى الى كثرة استدعاء ال useEffect هل هذا يؤثر على جودة التطبيق ؟؟

Ahmed Sawy · 2 يونيو 2021

هل ال useEffect عندما أقوم بوضع داتا متغيرة داخل الاراى الخاصة به .. هل هذه الداتا المتغيرة اللتى تؤدى الى كثرة استدعاء ال useEffect هل هذا يؤثر على جودة التطبيق او ال preformance ؟؟

السلام عليكم هذا كود بسيط لاشرح سؤالى ..

import React, {useEffect} from 'react';
import {View, Text, Button} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import {getBooks} from '../store/actions/booksActions';

export default function MainScreen() {
  const booksData = useSelector(state => state.booksData);
  const dispatch = useDispatch();

  console.log(booksData);

  useEffect(() => {
    dispatch(getBooks());
  }, [booksData]);

  return (
    <View>
      <Text>MainScreen</Text>
      {booksData.length !== 0 ? <Text>{booksData[3].name}</Text> : null}
      <Button title="test" onPress={() => dispatch(getBooks())} />
    </View>
  );
}

فى هذا ال dispatch الموجود داخل ال useEffect توجد داتا متغيرة مما يودى الى تكرار عملية الاستدعاء مرارا وتكرارا .. فانا قمت بعمل log للداتا التى تاتى من الردكس ولكن .. انا ارى انها يقوم بعمل log لهذه الداتا بصورة متكررة يعمل لها log مرتين او ثلاثة فى الثانية الواحدة ..
سؤالى هل هذا يؤثر على جودة التطبيق او ال preformance الخاصة به او يجعله بطئ ؟؟ ام ان هذه عادية جدا ولا داعى للقلق منها؟؟

Nuhla Almasri · 2 يونيو 2021

أنت تقوم بطباعة البيانات خارج ال useEffect أي أنه سيتم الطباعة بأي تحديث لاي شيئ , لكن إن كانت الطباعة داخل ال useEffect فلن يتم الطباعة إلا بحالة تغيرت قيمة الحالة booksData

تسلسل الأحداث تكون كالتالي :

onMount => يتم تغيير الحالة booksData الى الحالة الفارغة أو بلا قيمة الراجعه من الستيت للريدكس initial state
هنا ستتغير قيمة الحالة فيتم عمل Render و هنا يقوم بالطباعة ثم يقوم بدخول الuseEffect بما أنه يعمل على تتبع هذه الحالة و يقوم بأستدعاء الدالة لل ال dispatch
تقوم هذه الدالة بتغيير قيمة الحالة الى القيمة الجديدة fبالريدكس و تغيير ال props أيضا و هنا أيضا يقوم بالطباعة ثم يدخل ال useEffect مرة أخرى فيقوم بمنادلة الدالة مرة أخرى
و يقووم بتغيير الحالة الى المعلومات الجديدة و هنا يقوم بالطباعة و لكن في حال أن كانت الحالتين متطابقتين فلن يقوم بدخول الuseEffect مرة أخرى أما بحالة أختلفت الحالتين بأي قيمة فسيقوم بدخول الuseEffect مرة أخرى
لاحظ أنه هنا يقوم بالطباعة سواء أختلفت قيمة الحالة أو لا فإنه يقوم بالطباعة لانها ليست داخل ال useEffect و ذلك لأن إعطاء قيمة جديدة للحالة يقوم بعمل Render أي يرسمه مرة أخرى و الحالة هنا نقصد ب ال props لأن إستدعاء الريدكس يغير ال props مباشرة مما يؤدي الى عملية الRender و ليس الstate

يمكنك القيام بالتالي حتى لا يتم أستدعاء دالة الdispatch بطريقة عشوائية

export default function MainScreen() {
  const booksData = useSelector(state => state.booksData);
  const dispatch = useDispatch();



  //- هنا نطلب أيتم تطبيق الدالة لل dispatch 
  // فقط خلال onMount
  // بهذه الطريقة سيتم ‘ستدعاء الدالة مرة واحدة فقط عند تحميل المكون أول مرة 
  // و عند الضغط على الزر فقط 
  useEffect(() => {
    dispatch(getBooks());
     console.log(booksData);
  }, []);

  return (
    <View>
      <Text>MainScreen</Text>
      {booksData?.length !== 0 ? <Text>{booksData[3]?.name}</Text> : null}
      <Button title="test" onPress={() => dispatch(getBooks())} />
    </View>
  );
}

Ahmed Sawy · 2 يونيو 2021

بتاريخ 39 دقائق مضت قال Nuhla Almasri:
أنت تقوم بطباعة البيانات خارج ال useEffect أي أنه سيتم الطباعة بأي تحديث لاي شيئ , لكن إن كانت الطباعة داخل ال useEffect فلن يتم الطباعة إلا بحالة تغيرت قيمة الحالة booksData

تسلسل الأحداث تكون كالتالي :

onMount => يتم تغيير الحالة booksData الى الحالة الفارغة أو بلا قيمة الراجعه من الستيت للريدكس initial state

هنا ستتغير قيمة الحالة فيتم عمل Render و هنا يقوم بالطباعة ثم يقوم بدخول الuseEffect بما أنه يعمل على تتبع هذه الحالة و يقوم بأستدعاء الدالة لل ال dispatch

تقوم هذه الدالة بتغيير قيمة الحالة الى القيمة الجديدة fبالريدكس و تغيير ال props أيضا و هنا أيضا يقوم بالطباعة ثم يدخل ال useEffect مرة أخرى فيقوم بمنادلة الدالة مرة أخرى

و يقووم بتغيير الحالة الى المعلومات الجديدة و هنا يقوم بالطباعة و لكن في حال أن كانت الحالتين متطابقتين فلن يقوم بدخول الuseEffect مرة أخرى أما بحالة أختلفت الحالتين بأي قيمة فسيقوم بدخول الuseEffect مرة أخرى

لاحظ أنه هنا يقوم بالطباعة سواء أختلفت قيمة الحالة أو لا فإنه يقوم بالطباعة لانها ليست داخل ال useEffect و ذلك لأن إعطاء قيمة جديدة للحالة يقوم بعمل Render أي يرسمه مرة أخرى و الحالة هنا نقصد ب ال props لأن إستدعاء الريدكس يغير ال props مباشرة مما يؤدي الى عملية الRender و ليس الstate

يمكنك القيام بالتالي حتى لا يتم أستدعاء دالة الdispatch بطريقة عشوائية
export default function MainScreen() {
  const booksData = useSelector(state => state.booksData);
  const dispatch = useDispatch();



  //- هنا نطلب أيتم تطبيق الدالة لل dispatch 
  // فقط خلال onMount
  // بهذه الطريقة سيتم ‘ستدعاء الدالة مرة واحدة فقط عند تحميل المكون أول مرة 
  // و عند الضغط على الزر فقط 
  useEffect(() => {
    dispatch(getBooks());
     console.log(booksData);
  }, []);

  return (
    <View>
      <Text>MainScreen</Text>
      {booksData?.length !== 0 ? <Text>{booksData[3]?.name}</Text> : null}
      <Button title="test" onPress={() => dispatch(getBooks())} />
    </View>
  );
}

وهل كثر الطباعة هذه تؤثر على سرعة التطبيق وال performance ؟؟

Nuhla Almasri · 2 يونيو 2021

بتاريخ الآن قال Ahmed Sawy:

وهل كثر الطباعة هذه تؤثر على سرعة التطبيق وال performance ؟؟

كثرة الطباعة لا تؤثر لكن كثرة إستدعاء الدالة التي تجلب المعلومات تؤثر فأن جلب بيانات كبيرة الحجم من ال API يستهلك وقتا و قد يؤخر أو قد يدخل بحلقة مفرغة أن كان هناك تعديلات كثيرة على المعلومات التي يتم جلبها في كل مرة

تخيل أنك في دائرة هناك من يقوم بتعديل البيانات و هناك من يقوم بتقفي اثر هذه المعلومات و جلبها في كل مره يتم تغييرها

هل ال useEffect عندما أقوم بوضع داتا متغيرة داخل الاراى الخاصة به .. هل هذه الداتا المتغيرة اللتى تؤدى الى كثرة استدعاء ال useEffect هل هذا يؤثر على جودة التطبيق ؟؟

السؤال

Ahmed Sawy

3 أجوبة على هذا السؤال

Recommended Posts

Nuhla Almasri

Ahmed Sawy

Nuhla Almasri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية