[BUG] useLocalStorage's setValue should be callable in render phase (like a normal useState)

[jraoult]

Describe the bug

Calling the setter of useLocalStorage in a render phase triggers the error with the message Cannot call an event handler while rendering.. It is because useEventCallback is used internally, but I think useCallback should be used instead since it is not conceptually only an event handler.

To Reproduce

See the reproduction sandbox, but the gist of it is:

import { useEffect, useState } from 'react';
import { useLocalStorage } from 'usehooks-ts';

function App() {
  const [count, setCount] = useState(0);
  const [lsCount, setLsCount] = useLocalStorage('lsCount', 0);

  if (count === 0) {
    setCount(1);
  }

  // if (lsCount === 0) {
  //   // this should work but fails right now
  //   setLsCount(1);
  // }

  // this is the workaround
  useEffect(() => {
    if (lsCount === 0) {
      setLsCount(1);
    }
  }, [lsCount]);

Expected behavior

It should be possible to set a value in the render phase.

[LonelyFellas]

@jraoult #559

[juliencrn]

While I agree with the fact that it should be possible to set a value in the render phase, it's not a recommendable approach as the setter triggers a re-render every time the component is rendered. This can lead to performance issues and unexpected behavior, especially if you're updating state frequently or performing expensive operations.

This instead would be the right approach IMHO:

  useEffect(() => {
    if (lsCount === 0) {
      setLsCount(1);
    }
  }, [lsCount]);

[jraoult]

@juliencrn one last attempt to convince you:

the setter triggers a re-render every time the component is rendered.

This can also happen with useEffect. The way you schedule the update doesn't prevent the recursion. What matters is the base case ie. the if (lsCount === 0).

it's not a recommendable approach

I think it is actually the recommended approach in the official React documentation (cf. https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes). They recommend not using an effect and just setting the value in the render phase: "Start by deleting the Effect. Instead, adjust the state directly during rendering"

[jraoult]

@juliencrn I also just wanted to add that if you change your mind, I'm happy to create a PR with the proper test coverage for this.

[juliencrn]

I think it is actually the recommended approach in the official React documentation (cf. https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes). They recommend not using an effect and just setting the value in the render phase: "Start by deleting the Effect. Instead, adjust the state directly during rendering"

Oh, I didn't know about that, interesting.

So, I'm open to considering a fix, thanks by advance!

[jraoult]

@juliencrn great. Leave it with me. I'll take a look at this over the week end.