useLocalStorage: Questionable use of useEventCallback

[dmeehan1968]

useLocalStorage (as derivatives) make use of useEventCallback to make cached versions of setValue and removeValue, but these contain derived functions that can change and useEventCallback does not support dependencies for regeneration.

I've encountered problems in hydration on NextJs around client component pre-render because of this. Changing the useLocalStorage code to use useCallback with appropriate dependencies seems to resolve this, but I can't speak to the design decisions that led to the use of useEventCallback.

In my app, I am storing metadata related to components that will be dynamically generated on the client, and are therefore not available during server-side pre-render. I am using the { initialiseWithValue: false } option, as noted in the docs. I can use the useLocalStorage as shipped if I set an empty array for my metadata, but I also want to be able to provide an initial array for when the local storage has no value. When I supply an initial array, I get a 'cannot update a component whilst handling an event' error, but if I modify useLocalStorage to switch to useCallback instead of useEventCallback, this problem goes away.

I'd like some input on whether useEventCallback was intentional here, especially around the lack of dependency checking. I'm not sure I can easily create a working example of the problem as my UI is a little complicated and that might be part of why the problem crops up.

[seanparmelee]

For what it's worth, the use of useEventCallback will be removed with #584.

cc @jraoult @juliencrn

[jraoult]

yep @dmeehan1968 I came to the same conclusion and also created a PR to address it as mentioned by @seanparmelee. Feel free to nudge @juliencrn if you want to see it merged.

[dmeehan1968]

@juliencrn yes please