Hydration errors from custom localStorage hooks

My last dashboard project nearly imploded because I decided to roll my own persistence logic instead of just using a library. I was sitting there staring at a wall of hydration mismatch errors, watching the server scream because I’d tried to access the window object during the initial render (classic mistake). I had spent hours writing this "clever" little hook that was supposed to sync state with local storage, but it was basically a ticking time bomb.

The real headache wasn't even the SSR crashes, though. It was the edge cases that I completely overlooked in my quest to be efficient. I had a situation where a single corrupted JSON string in a user's browser managed to take down the entire UI because my JSON.parse wrapper wasn't defensive enough. Then there was the multi-tab synchronization issue—I'd change a setting in one window, and the other tab would just sit there, blissfully unaware, holding onto stale state like it was actually useful. It felt like I was managing two different versions of reality.

I eventually gave up on my DIY approach and switched to the useLocalStorage hook from @reactuses/core. It’s a relief to actually have a developer experience that doesn't feel like a chore. The API is a direct replacement for useState, so there isn't a massive learning curve, but it actually handles the serialization properly. It doesn't just turn everything into a useless string; it actually manages round-tripping for numbers, objects, and even Set objects without breaking a sweat.

Most importantly, it’s SSR-safe. It doesn't trigger those annoying hydration warnings because it's built to handle the transition from server to client gracefully. It also handles the cross-tab communication out of the box, so when the state changes in one place, everything else stays in sync (no more "two truths" fighting for dominance in your components). It’s much more robust than the manual checks I was trying to wedge into my code.

https://github.com/reactuses/reactuses
https://promptcube3.com

I'm curious how everyone else is managing this in Next.js or Remix. Are you still wasting time writing custom hooks for every little thing, or have you actually moved to something more stable?