pop-up notification in react after login, How to make it so that it will on show the message one time when you first logged in?

Question

I am using react-toastify for the popup messages, so after login when my page is redirected to profile.js, I added this useEffect that will run on mount to show notification

useEffect(() => {
    notify();
  }, []);
  const notify = () =>
    toast.success("Logged in Successfully.", {
      position: toast.POSITION.TOP_CENTER,
      autoClose: 3000,
    });

but the problem is everytime I visit or go back to profile the popup message shows, how can I make it so that it will only show when you are logged in & redirected to profile the first time?

Answer 1

I recommend you have a read on
https://reactjs.org/docs/hooks-effect.html#example-using-hooks

"Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update."

which is probably why the toast is rendered on every page load. I would add a condition to check if the user is already logged in. If it's their first time logging in display the toast message.

IF user is not logged in THEN
  on successful login
  display toast
END IF