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.

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