CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-hookslocal-storage
Robertas Ankudovicius
Robertas Ankudovicius

Reputation: 334

useEffect does not listen for localStorage

I'm making an authentication system and after backend redirects me to the frontend page I'm making API request for userData and I'm saving that data to localStorage. Then I'm trying to load Spinner or UserInfo.

I'm trying to listen for the localStorage value with useEffect, but after login I'm getting 'undefined'. When the localStorage value is updated useEffect does not run again and Spinner keeps spinning forever.

I have tried to do: JSON.parse(localStorage.getItem('userData')), but then I got a useEffect infinite loop.

Only when I'm refreshing the page does my localStorage value appear and I can display it instead of Spinner.

What I'm doing wrong?

Maybe there is a better way to load userData when it's ready?

I'm trying to update DOM in correct way?

Thanks for answers ;)

import React, { useState, useEffect } from 'react';
import { Spinner } from '../../atoms';
import { Navbar } from '../../organisms/';
import { getUserData } from '../../../helpers/functions';

const Main = () => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    setUserData(localStorage.getItem('userData'));
  }, [localStorage.getItem('userData')]);

  return <>{userData ? <Navbar /> : <Spinner />}</>;
};

export default Main;

Upvotes: 23

Views: 65215

Answers (6)

oxygen
oxygen

Reputation: 497

this should be working:


  const [mode, setMode] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    function checkModeChange() {
      const item = window.localStorage.getItem('theme');

      if (item) {
        setMode(item as 'light' | 'dark');
      }
    }

    checkModeChange();
    window.addEventListener('storage', checkModeChange);

    return () => {
      window.removeEventListener('storage', checkModeChange);
    };
  });

Upvotes: 0

Cause Chung
Cause Chung

Reputation: 1495

With React 18's useSyncExternalStore, something like:

const EVENT_TYPE = "localUpdated";
class LocalStorageEvent extends Event {
  constructor(readonly key: string) {
    super(EVENT_TYPE, { bubbles: true });
  }
}

export function useLocalStorage() {
  // ...
  const data = useSyncExternalStore(subscribe, getSnapshot);
  return data;
}

function subscribe(onStorageChange: () => void) {
  function listener(event: Event) {
    if (event instanceof LocalStorageEvent && event.key === "mykey") {
      onStorageChange();
    }
  }

  window.addEventListener(EVENT_TYPE, listener);
  return () => window.removeEventListener(EVENT_TYPE, listener);
}

function getSnapshot() {
  const value = localStorage.getItem("mykey");
  return value ? JSON.parse(value) : undefined;
}

Note useSyncExternalStore compares snapshot by Object.is, according to doc.

Upvotes: 0

Roy Martinez
Roy Martinez

Reputation: 358

The solution is to use this structure:

useEffect(() => {
    window.addEventListener("storage", () => {
      // When storage changes refetch
      refetch();
    });

    return () => {
      // When the component unmounts remove the event listener
      window.removeEventListener("storage");
    };
}, []);

Upvotes: 4

David Giraldo
David Giraldo

Reputation: 141

Event listener to 'storage' event won't work in the same page

The storage event of the Window interface fires when a storage area (localStorage) has been modified in the context of another document.

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

Upvotes: 13

Minan
Minan

Reputation: 887

It would be better to add an event listener for localstorage here.

useEffect(() => {
  function checkUserData() {
    const item = localStorage.getItem('userData')

    if (item) {
      setUserData(item)
    }
  }

  window.addEventListener('storage', checkUserData)

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

Upvotes: 49

Victor Alessander
Victor Alessander

Reputation: 172

  • "Maybe there is a better way to load userData when it's ready?"

You could evaluate the value into localStorage directly instead passing to state.

const Main = () => {
  if (localStage.getItem('userData')) {
    return (<Navbar />);
  }
  else {
    return (<Spinner />);
  }
};

If there is a need to retrieve the userData in more components, evaluate the implementation of Redux to your application, this could eliminate the usage of localStorage, but of course, depends of your needs.

Upvotes: -2

Related Questions