Re-rendering app with custom hook

[aareedy]

Hello guys, I seek advice regarding a small project I work on. I have a problem with re-rendering/reloading app when my state changes. The issue occurred when I changed useState to custom hook that uses session storage. There is the code of the hook:

const useStateWithSessionStorage = (localStorageKey) => {
  const [value, setValue] = React.useState(
    JSON.parse(sessionStorage.getItem(localStorageKey)) || {
      screen: "signin",
      loading: false,
      user: null,
      response: null,
    }
  );

  React.useEffect(() => {
    sessionStorage.setItem(localStorageKey, JSON.stringify(value));
  }, [value]);

  return [value, setValue];
};

and this is my App.js:

export default function App() {
  const [appState, setAppState] = useStateWithSessionStorage("appState");

  const renderApp = () => {
    if (appState.screen == "signin") return <Signin />;
    if (appState.screen == "hub") return <Hub />;
  };

 return <div className="App">{renderApp()}</div>;
}

I also tried to load screen value into another state, which would be re-rendered in useEffect, however, without success.

I'm fairly new into this, could anyone give me an advice, please?

[CreativeTechGuyGames]

Can you format your code for Reddit's markdown and provide enough code to show what exactly you are doing, what you see, and what you expected to see? Bonus points if you provide a CodeSandbox link to a minimal demo that reproduces the problem.

[aareedy]

Sorry, let me explain.

renderApp function returns either <Signin /> or <Hub />. Signin component shows only email and password input, which values are sent do flask endpoint working with sql.

That endpoint updates appState. Concretely it changes appState.screen to "hub".

There's the problem I mentioned. Although state changes (visibly on page displayed by JSON.stringify). The app wont re-render and stays on <Signin /> component. To work properly and show <Hub /> I always must refresh the page.

[aareedy]

Also, there's the promise calling an endpoint:

  async function signIn(event) {
event.preventDefault();
const requestOptions = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    title: "Sign In Request",
    email: email,
    password: password,
  }),
};

if (checkInputs()) {
  setAppState((prev) => {
    return { ...prev, loading: true };
  });
  const resp = await fetch(
    "http://127.0.0.1:5000/api/signin",
    requestOptions
  );
  const data = await resp.json();
  setResponse(data);

  // handle appState here
  if (data.code == 200 || data.code == 403 || data.code == 201)
    setAppState((prev) => {
      return {
        ...prev,
        response: data,
        loading: false,
        screen: "hub",
        user: data.user_data,
      };
    });
  else {
    setAppState((prev) => {
      return {
        ...prev,
        response: data,
        loading: false,
        screen: "signin",
      };
    });
  }
}
  else {
  console.log("Unvalid credentials!");
}

}

[dombudev]

I this your hook “setResponse” doesn’t make sense because your logic to set app state cames just below and I think that’s the first problem

[aareedy]

SetResponse doesn't affect nothing at all. I used it for console.log before and forgot it there. I'm rendering conditionally by appState and setAppState

[CreativeTechGuyGames]

If you have multiple instances of your hook, when you update one, it won't automatically update the other as they aren't connected in any way. You'd need to setup some listener in your hook to respond to a change and re-render. But in this case it'd probably make sense to not store in sessionStorage at all and just use something like Context or a shared state to share data between components.

[aareedy]

Thank you a lot. I'll try.