Post

Fredrik Höglund
@ephem.dev

Hoisting state is so often the answer, but many devs avoid it because they want co-location. Underrated solution: Export a hook alongside the component. Import and use the hook in a parent, pass the returned state down. Now parent owns the state and can interact with it, but logic is co-located.

0 reposts4 likes

Fredrik Höglund
@ephem.dev

I've seen so many creative solutions to avoid hoisting, like mutating refs, misusing useImperativeHandle, syncing state in effects etc, etc, often leading to hard to catch bugs. Just hoist it.

Fredrik Höglund
@ephem.dev

Yeah, that’s a good point. I’ve never actually experienced this to be a problem in practice though. Maybe I’m just not observant enough but I like co-locating this kind of thing enough I wont stop doing it if I don’t have a strong enough reason. 😀

Fredrik Höglund
@ephem.dev

That's my understanding too, but it's not what I'm seeing at least in Next so might have been fixed there, or in general, or this only happens in certain conditions or for certain changes. 🤷‍♂️ Either way, I wont sweat about it until it becomes an actual problem. Still a good caveat to mention though!