State not being saved across navigation to different URLs within App

[nazevedo3]

Hi Team,

I have a question, I'm sure I'm probably doing something wrong, that I was hoping you could help with.

I'd like to be able to use one component to render many different "views" based on the URL. I have a useEffect in this component that switches based on the location.pathname and based on that pathname, it'll make an API call. But before it makes the API call, it checks the length of the atom to see if it's empty or not, then will call the API and set the atom based on the API call.

However, when I navigate to a different URL and come back to one I've already visited, the API is called again, even though I've previously set the state for that URL.

Relevant code below:

Atom.js
export const reports = atom({ key: "reports", default: { country: [], network: [], }, });

the one component that will render different data based on the reports atom.

import { useRecoilState } from "recoil";
import { reports } from "../globalState/atom";

const TableView = ({ columns, }) => {
  const location = useLocation();
  const [report, setReport] = useRecoilState(reports);


  const currentView = location.pathname.split("/")[1];

useEffect(() => {
    const getReportsData = async () => {
      switch (location.pathname) {
        case "/network":
 
          if (report[currentView].length === 0) {
            const response = await fetch("/api");
            const body = await response.json(); 
                
                        setReport(
              Object.assign({}, report, {
                [currentView]: body,
              })
            );
        console.log('ran')
        break;
     }
   getReportsData();
   }, [])

As previously mentioned, that console.log is ran every time I navigate to /network, even if I've already visited that URL.

[drarmstr]

Looks like this React effect is memoized with no dependencies, so it would re-execute every time the component is re-mounted and cause the console to execute. Also location is not listed as a dependency, so it would not call the effect if the location changes. report, setReport, and currentView are also not properly included as deps for the React effect memoization.

For future reference, also note the URL persistence functionality expected in the upcoming Recoil Sync library when released. You can view the current preview documentation and source code.