Why Hindsight Made Us Rethink Our Global Study Context
We put everything in one React context — streak, topic strengths, mistakes, quiz history, retry state, exam date, weekly scores — and for a long time it felt like good architecture. One place for a...

Source: DEV Community
We put everything in one React context — streak, topic strengths, mistakes, quiz history, retry state, exam date, weekly scores — and for a long time it felt like good architecture. One place for all study state. Clean imports. No prop drilling. Then we started tracing the system's behavior with Hindsight and realized we had built a monolith that re-rendered the entire app on every quiz answer, silently miscounted mastered topics after every session, and made it structurally impossible to connect related pieces of state without introducing stale closure bugs. The context wasn't wrong. It was just doing too many things, and we couldn't see the consequences until we had a tool that observed behavior across sessions rather than one render at a time. The Context: What It Holds src/context/StudyContext.tsx is the backbone of the entire app. Every page that shows study data reads from it. Every page that produces study data writes to it. Here is the full shape of what it manages: interface S