What problem does it solve? Passing props through many layers of nested components (prop drilling) makes React code hard to refactor and obscures where data originates. This Skill teaches the Provider pattern so components that need shared data can access it directly via React Context. ## Core Features & Use Cases - Context Creation: Create a Context with React.createContext() and wrap components in its Provider to broadcast values like themes, auth state, or locale. - Custom Hooks: Encapsulate context consumption in hooks such as useThemeContext, including error handling when used outside a Provider. - Performance Guidance: Learn when to split contexts by concern to avoid unnecessary re-renders of all consumers on every state change. - Use Case: When building a theme toggle where ListItem, Header, and Text components all need the current theme, wrap the app in a ThemeProvider and consume the value with useContext instead of threading props through every layer. ## Quick Start Refactor my React component tree to use the Provider pattern with React Context so the theme value no longer needs to be passed down through props.
