Next.js Discord

Discord Forum

How can I make it so a component refreshes on every redirect or page change?

Unanswered
Pond loach posted this in #help-forum
Open in Discord
Pond loachOP
I have a navbar component which displays some information about the user if they user is logged in, else it says login or register.
The problem is, when I logout, and delete the cookie which is how I store user information, the user is sent to the root page "/".
For some reason, the navbar doesnt refresh, so you can still see the user information. The only way to remove it is if you refresh the page.

How would I refresh the component on every page update so it displays the updated information?

Navbar.tsx: https://pastebin.com/hdDvgQf8

11 Replies

Pond loachOP
Bump
Cuban Crocodile
Can we see the current code implementation? It sounds like this is probably related to a useEffect call and making sure you are using the right dependencies.
Cuban Crocodile
Your code. The way that you are currently using this navbar, and your current strategy for getting the navbar to refresh. It's a lot easier to help if you share the code from the component and anything else related. I would recommend looking at some of the posts on github for examples on how to show the code well.
Cuban Crocodile
My apologies, I thought your link was a screenshot at first. It's early and I didn't sleep well.

The fetch is happening everytime the component renders, regardless of the result of "getUser", and useEffect will only be called the first time the component is rendered because of the empty dependency array. To get it run again on logout, something needs to adjust the state. If you remove the dependency array, it will run everytime it is rendered - which will probably be a lot more than you want it to. 

useEffect(() => {
  const fetchUser = async () => {
    if (!user) {
      const userData = await getUser();

      console.log(userData);
      const discordData = await fetchDiscordInfo();
      setUser(userData);
      //@ts-ignore
      setData(discordData);
    }
  };

  fetchUser();
}, [user]);

const handleLogout = async () => {
  const res = await logout();

  if (res === true) {
    router.push("/");
    setUser({})
    toast({
      variant: "default",
      title: "Successfully logged out!"
    });
  } else {
    toast({
      variant: "destructive",
      title: "Logout Failed",
      description: "Please try again later!"
    });
  }
};
I'm not 100% on this - but adding a conditional based on the user state, and then having your logout function change the user state should hopefully get you going.
@Cuban Crocodile My apologies, I thought your link was a screenshot at first. It's early and I didn't sleep well. The fetch is happening everytime the component renders, regardless of the result of "getUser", and useEffect will only be called the first time the component is rendered because of the empty dependency array. To get it run again on logout, something needs to adjust the state. If you remove the dependency array, it will run everytime it is rendered - which will probably be a lot more than you want it to. useEffect(() => { const fetchUser = async () => { if (!user) { const userData = await getUser(); console.log(userData); const discordData = await fetchDiscordInfo(); setUser(userData); //@ts-ignore setData(discordData); } }; fetchUser(); }, [user]); const handleLogout = async () => { const res = await logout(); if (res === true) { router.push("/"); setUser({}) toast({ variant: "default", title: "Successfully logged out!" }); } else { toast({ variant: "destructive", title: "Logout Failed", description: "Please try again later!" }); } };
Pond loachOP
I see, thank you for the reply. I handle the login logic in a loginComponent.tsx file. Is there a way I can transfer over states so I change the navbar user state? It worked when I did this for the logout, but the same thin occurs when logging in, the navbar doesnt update: 
useEffect(() => {
    const fetchUser = async () => {
      const userData = await getUser();

      const discordData = await fetchDiscordInfo();
      setUser(userData);
      //@ts-ignore
      setData(discordData);
    };

    fetchUser();
  }, [user]);

  const handleLogout = async () => {
    const res = await logout();

    if (res === true) {
      router.push("/");
      window.dispatchEvent(new Event("userLogout"));
      setUser(null);
      toast({
        variant: "default",
        title: "Successfully logged out!",
      });
    } else {
      toast({
        variant: "destructive",
        title: "Logout Failed",
        description: "Please try again later!",
      });
    }
  };
Cuban Crocodile
Passing state is the core of most beginner React problems (source, an intermediate react user). Options for passing state include using props (passing from a parent to child component), useContext (make a piece of state available anywhere within a tree without passing props, you simply import the needed state) and state management libraries like Redux. How you proceed is really up to you.... I hope this has been helpful.
I will check them out