Post

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.

NB the exported hook shouldn’t live in the same file as the component or it’ll mess with HMR.

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. 😀

If memory serves it’ll just invalidate and hard reload specifically when you edit the hook.