You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
useLocalStorage
(as derivatives) make use ofuseEventCallback
to make cached versions ofsetValue
andremoveValue
, but these contain derived functions that can change anduseEventCallback
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 useuseCallback
with appropriate dependencies seems to resolve this, but I can't speak to the design decisions that led to the use ofuseEventCallback
.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 theuseLocalStorage
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 modifyuseLocalStorage
to switch touseCallback
instead ofuseEventCallback
, 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.
Beta Was this translation helpful? Give feedback.
All reactions