LocalStorage في NextJS ، مشكلة useEffect

في حالتك يمكنك قراءة القيم من local storage خارج useEffect وهذا أفضل حل

const [ meetings, setMeetings] = useState([]) // meetings= [{meeting1},{meeting2}]

const meetingsData = localStorage.getItem('meetings');                 // نقلناها خارج useEffect 
const meetingsDataJSON = () => JSON.parse(localStorage.getItem('meetings')); // نقلناها خارج useEffect 

useEffect(() => {

  if(meetingsData === undefined || 
     meetingsData === ''        ||
     meetingsData === null
    ){
    localStorage.setItem('meetings', JSON.stringify([]))         
  }


  if( meetingsDataJSON().length === 0){

    const meetingsInLocalStorage  = JSON.parse(localStorage.getItem('meetings'))
    setMeetings([...meetings, meetingsInLocalStorage])

  }
},[meetings])

يمكن إضافة مستمع أحداث للتغيرات التي تطرأ على meeting في local storage وتقوم على تحديثها تلقائياً

useEffect(() => {
  function checkMeetingData() {
    const item = localStorage.getItem('meetingData')

    if (item) {
      setMeetingData(item)
    }
  }

  window.addEventListener('storage', checkMeetingData)

  return () => {
    window.removeEventListener('storage', checkMeetingData)
  }
}, [])

أو بهذه الطريقة:

useEffect(() => {
    window.addEventListener("storage", () => {
      // تحديث عند حدوث تغييرات في التخزين
      refetch();
    });

    return () => {
      // عند عمل unmounts نحذف مستمع الأحداث
      window.removeEventListener("storage");
    };
}, []);

سبب تلك الحلقة الﻻ نهائية أنك تقوم بإستخدام useEffect وتجعلها معتمدة على المتغير meetings وفي نفس الوقت تقوم بتغيير نفس المتغير في نفس دالة الuseEffect مما يعيد نداؤها مرة أخرى ويجعلها بالتالي تغير المتغير مرة أخرى إلى مالا نهاية, الحل أن تقوم بعمل دالتان للuseEffect

1. الأولى تجعلها ﻻ تعتمد على متغيرات من الأساس, وتلك التي تقوم فيها بتغيير الmeetings
2. الثانية المعتمدة على متغير الmeetings تقوم فيها بعمل باقي الشفرة البرمجية التي ﻻ تغير من هذا لمتغير