setUser not setting the value to the localStorage

[aynuayex]

Describe the bug
i have just copied from the docs directly and used it like below the the user key value is not set on the localStorage, and i do not even think this library works?
here is the version "use-local-storage": "^3.0.0",
here is the code

export default function Login() {
const [user, setUser] = useLocalStorage("user",{});

async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const { userId, password } = values;
      const response = await axios.get(
        `${
          import.meta.env.VITE_BASE_API
        }/Login/SignIn?UidCod=${userId}&UidPwd=${password}`
      );
      console.log(response.data)
      if (response.statusText === "OK") {
        setUser(response.data);
        navigate("/out_patient");
        return;
      }
    } catch (err) {
      console.log(err);
    }
  }
return (<>It does not work I should just stick to the localStorage API or built my own or use another one!</>);
}

[nas5w]

Hi @aynuayex, sorry the package isn't working for you. It does work, but possibly not as you expect.

I suspect the navigate function you're using is unmounting the component before state is actually set. In this library, the local storage value is set in an effect once the state is set. You could validate this is the cause by removing the navigate call and seeing if local storage is set.

If this ends up being the issue, you have a couple options. If you want to keep using this package, I believe the following should work:

const emptyUser = {};
export default function Login() {
const [user, setUser] = useLocalStorage("user", emptyUser);

useEffect(() => {
  if (user !== emptyUser) {
        navigate("/out_patient");
  }
}, [user])

async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const { userId, password } = values;
      const response = await axios.get(
        `${
          import.meta.env.VITE_BASE_API
        }/Login/SignIn?UidCod=${userId}&UidPwd=${password}`
      );
      console.log(response.data)
      if (response.statusText === "OK") {
        setUser(response.data);
        return;
      }
    } catch (err) {
      console.log(err);
    }
  }
return (<>It does not work I should just stick to the localStorage API or built my own or use another one!</>);
}

If you'd like to look into another library that might synchronously set the local storage value, consider checking out use-local-storage-state.