How to properly reset state before using navigate

[sprattek]

Hey guys,

first of all thanks for the great work, I really like zustand and I'm probably just doing something wrong but I have to ask how to properly reset the store state into the initial state before we leave the page. I'm doing that currently in useEffect unmounting but it seems like the store is set to initial state after the next page is actually initialized. I've prepared a simple demo.

The issue can be spotted in the console when you navigate from landing.jsx to page.jsx, so I'm getting some data at landing page and setting the isSuccess and message values in the store and resetting them in useEffect unmount. After navigating to page.jsx, you can see in console.log that the resetting will run after the page.jsx is rendered.

So my question is, am I doing something wrong or it is normal scenario. Thank you very much.

store.js

import create from "zustand";

const useStore = create((set, get) => ({
  items: [],
  isError: false,
  isSuccess: false,
  isLoading: false,
  message: "",
  reset: () => {
    set({
      items: [],
      isError: false,
      isSuccess: false,
      isLoading: false,
      message: ""
    });
  },
  getItems: () => {
    // lets say we fetch items from api here
    const fetchedItems = [
      { id: 1, title: "item" },
      { id: 2, title: "item2" }
    ];
    set({
      items: fetchedItems,
      isError: false,
      isSuccess: true,
      isLoading: false,
      message: "Successfully get items list"
    });
  }
}));

export default useStore;

landing.jsx

import { useEffect } from "react";
import { Link } from "react-router-dom";
import useStore from "./store";
import shallow from "zustand/shallow";

function LandingPage() {
  const { items, getItems, reset } = useStore(
    (state) => ({
      items: state.items,
      getItems: state.getItems,
      reset: state.reset
    }),
    shallow
  );

  useEffect(() => {
    getItems();
  }, []);

  useEffect(() => {
    return () => {
      reset();
    };
  }, []);

  return (
    <div>
      <p>LandingPage</p>
      <p>{JSON.stringify(items)}</p>
      <Link to="/page">Go to another page</Link>
    </div>
  );
}
export default LandingPage;

page.jsx

import { Link } from "react-router-dom";
import { useEffect } from "react";
import useStore from "./store";

function Page() {
  const isSuccess = useStore((state) => state.isSuccess);
  const message = useStore((state) => state.message);

  useEffect(() => {
    console.log("useeffect", isSuccess, message);
  }, [isSuccess]);

  return (
    <>
      <p>Another page</p>
      <Link to="/">Go back</Link>
    </>
  );
}
export default Page;

[dai-shi]

I think it's how react-router behaves. Can anyone confirm?

[sprattek]

Yeah you are right, it seems that's just how react normally behaves based on this issue. Thanks.

[nick-buzzy]

Other than useBlocker from react-router (which is a bit riskier) is there another commonly recommended pattern? It seems like react-router and this library are kind of just pointing fingers without proposing a solution.

[dai-shi]

Hmmm, I'm not sure what's best with the React-Router v6 API.
Maybe https://reactrouter.com/docs/en/v6/hooks/use-link-click-handler ?

[sprattek]

I would maybe suggest using just useNavigate hook to handle new route redirecting and resetting the state before that, something like this seems working.

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import useStore from "./store";
import shallow from "zustand/shallow";

function LandingPage() {
  const navigate = useNavigate();
  const { items, getItems, reset } = useStore(
    (state) => ({
      items: state.items,
      getItems: state.getItems,
      reset: state.reset
    }),
    shallow
  );

  useEffect(() => {
    getItems();
  }, []);

  const goTo = (to) => {
    reset();
    navigate(to);
  };

  return (
    <div>
      <p>LandingPage</p>
      <p>{JSON.stringify(items)}</p>
      <p onClick={() => goTo("/page")}>Go to another page</p>
    </div>
  );
}
export default LandingPage;