سؤال عن الطريقة الأفضل من حيث الأداء لاستيراد البيانات الكبيرة من restful api في reactjs

دعنا نتناقش نقطة نقطة هنا

1. أولاً: هل تقوم بإستخدام redux أم التمرير بالprops? في الحقيقة بما أن البيانات كبيرة فيُفضل تخزينها حتى ﻻ نحتاج إلى جلبها كل مرة ويمكن تخزينها إما في الlocalStorage أو في الredux وهذا خيار أفضل
2. ثانياً ألية جلب البيانات: نقوم بجلب البيانات في الدالة useEffect كما أوضح صﻻح بالتعليق السابق, ولكن أريد أن أضيف أنه بما أن البيانات كبيرة ومتغيرة فيمكننا إذا إستخدام ال useSWR وهذا عبارة عن خطاف يأتي من خلال تثبيت مكتبة الswr وهي مكتبة تعمل مع react بغرض تنفيذ عملية الcaching في تطبيق الreact
3. ألية عمل الuseSWR تكون كالتالي: يتم أولاً جلب البيانات في البداية, ومن ثم بعد كل فترة زمنية معينة يقوم الخطاف useSWR بالتأكد إن كانت البيانات في الapi هي نفسها التي مخزنة لديك أم ﻻ, إن كانت هي نفسها إذا ﻻ يقوم بجلبها مرة أخرى, إن كانت مختلفة فيقوم إذا بجلبها مرة أخرى
4. يتم إستخدامه بالشكل التالي : أولاً نقوم بتثبيته عبر الأمر

npm install swr

بعد ذلك نقوم بإستخدامه على النحو التالي

import useSWR from 'swr'

function SomeCOmponent () {
  const { data, error } = useSWR('/api/user/:some_id', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  // render data
  return <div>hello {data.name}!</div>
}

وبالنسبة للدالة fetcher تكون عبارة عن دالة تستخدم fetch أو axios لجلب البيانات كما في الشفرة التالية

const fetcher = (...args) => fetch(...args).then(res => res.json())

💡

هذا يعتمد بطريقة كبيرة على المشروع وعلى تفضيلك لطريقة العمل فعادة في react أول شئ تفكر به هو عمل fetch ل data داخل مكون ما بهذه الطريقة

const [users, setUsers] = useState(); 
useEffect(() => {
    const getData = async () => {
      const data = await getAdminUsers();
      const onlyUsers = [];
      data?.content?.map((res) => onlyUsers.push(res.user));
      setUsers(onlyUsers);
      
    };
    getData();
  }, []);

وهذا لابأس فيه في حالةة تطبيق صغير بحيث هذه العملية لا تتكرر كثيرا في المكونات لكن اذا كان لديك مشروع يعتمد بشكل كبير على البيانات فيجب وحتما تنظيمها في مكان واحد وهنا ستحتاج الى state managment store و المكاتب الشهورة لهذه هي redux ويمكن استخدام اما redux-thunk معها او redux-saga ك middlware لكن شخصيا قد مررت مؤخرا بمكتبة state managment تدعى zustand وأنصحك بشدة بالقاء نظرة عليها فهي تجعل الأمور جد بسيطة دون التضحية بأي ميزة من الميز التي يقدمها redux او context api و للاختصار عند البدء في مشروع تراه سيعتمد على كم كبير من req والبيانات فالمنصوح به هو استخدام احدى مكتبات ال state managment واتباع ال best practices الموثقة لتلك المكتبات