JavaScript Provider Pattern — stop prop drilling, wrap once & read anywhere

You're passing the same prop down through ten components, and eight of them don't even use it. That's prop drilling — and the Provider pattern kills it. In under 3 minutes: the problem (your App has data, a ListItem/Header/Text deep in the tree need it, so you thread it through SideBar, List, Content, Block — couriers that never read it, and renaming that prop means editing six files), the fix (create a Context, wrap the tree in its Provider once, and any component at any depth pulls the data straight out with useContext — the data teleports past the middlemen), the code (createContext + Provider value={data} + useContext, no props down the tree), proving it with theming (one ThemeContext + a guard hook that throws if you forgot the Provider), the catch (every component consuming a context re-renders on every change — context is a teleporter, not a state manager; split one provider per concern), and the truth that you already live in this pattern: Redux's Provider, React Router, styled-components' ThemeProvider — wrap the tree, broadcast a value, consume anywhere.

⏱ Chapters
0:00 The Provider pattern
0:28 The problem: prop drilling
0:52 The fix: wrap the tree in a Provider
1:11 The code: createContext + useContext
1:33 Prove it: theming + a guard hook
1:55 The catch: every consumer re-renders
2:17 You already use it: Redux, Router, styled
2:38 Takeaway

💬 Context or a state library — where's your line? Drop it below.
🔔 Subscribe to Beyond Code Karma — JavaScript design patterns, explained Fireship-style.
📚 Source: https://www.patterns.dev/vanilla/provider-pattern/

#javascript #webdev #designpatterns #providerpattern #reactcontext #usecontext #propdrilling #react #javascripttutorial #coding #programming #beyondcodekarma

Видео JavaScript Provider Pattern — stop prop drilling, wrap once & read anywhere канала Beyond Code & Karma