UseEffect 在用户登录时更新导航栏？

Question

I'm working on a navbar that changes whenever it detects there is a user in local storage using useState and useEffect. Here's my logic:

const [user, setUser] = useState("")
  

  function fetchData(){
    const item = JSON.parse(localStorage.getItem('name'))
    if(item) {
      setUser(item)
    }
  }

  useEffect(() => {
      fetchData()
});

return({user? (<LoggedIn />) : (<ClientBar />)

The code essentially begins with no user, and in the fetchData() function it checks whether a user exists and sets the user as whatever it finds in local storage. I can tell the logic works because when I refresh it, it changes from <ClientBar> to <LoggedIn> , but the whole reason I put it in a useEffect() was so that it would update immediately. Any advice? I know the best practice would be to put it in a global state, but I really am not sure how to set that up and I need to get this done, fast. A method I've found that works is putting history.go(0) in my login function so that it refreshes on authentication, but it doesn't look too good so I'm trying to avoid it if I can. Cheers.

Answer 1

As Abhi Patil stated, you need to check localStorage changes. It has nothing to do with useEffect as it is only triggered when the component is mounted.

You need to wrap fetchData() inside storage event listener like so:

useEffect(() => {
 window.addEventListener('storage', () => {
  const item = JSON.parse(localStorage.getItem('name'))
    if(item) {
      setUser(item)
    }
 })
})

Answer 2

Your useEffect should be:

useEffect(() => {
      fetchData()
}, [user])

So when user changes it will check each time. Because you're fetching localstorage I'd also encourage you to add a loading component while that's being done.

Checking localstorage Should also be using async/await:

const fetchData = async () => {
    const item = await JSON.parse(localStorage.getItem('name'))
    if(item) setUser(item)
  }

While this it's waiting for the check you should render a loading with another useState .