Prop drilling is usually the reason we reach for React Context: state that started in one component ends up threaded through five layers of props, and every layer in between has to know about data it doesn't use. Context fixes that. But "use Context" isn't a setup — there are a dozen ways to structure the files, and most of them share a papercut that has annoyed me in every codebase I've worked in.

This article walks through the setup I've landed on. It's three files, it makes "Go to Definition" actually useful, and it uses a lint rule to make the one risky part of the pattern impossible to get wrong. The running example is a tic-tac-toe game — the full working project is at react-context-boilerplate-example.

The papercut

Here's the workflow friction. In a typical Context setup, components access state through a hook:

const { winner, resetGame } = useGame();