React Context Is Not the Problem — Poor Component Composition Is

A common misconception among React developers holds that React Context causes all components to re-render, even those that do not consume it. In reality, unnecessary re-renders typically stem from poor component composition, such as placing shared state inside a parent that also renders unrelated child components. The recommended fix is to isolate state within a dedicated provider component and pass unrelated components as children, so they are not re-rendered when state changes. Bundling unrelated state values into a single context object is another frequent mistake, as any state update triggers re-renders in all consumers of that context. Splitting state into separate, focused context providers and memoizing context values are practical steps developers can take to avoid these performance pitfalls.