How Prop Drilling Creeps In – And How to Refactor It with React Context
In this hands-on live coding session, we walk through a natural React refactor — from a simple, working component to a cleaner, more maintainable design.
We start with a flat SearchableList component that manages search, filtering, and item selection.
Then, we split it into smaller pieces — SearchBox, List, and ListItem.
But as the app grows, so does the complexity — and suddenly, we’re passing the same props through multiple layers.
That’s prop drilling, and it can make your components tightly coupled, harder to reuse, and harder to evolve.
By the end of this video, you’ll see how to:
Spot when prop drilling becomes a problem
Refactor shared logic into a clean, reusable React Context
Build a SearchableListProvider and useSearchableList() hook to simplify your component tree
Design your state flow for scalability and flexibility
This refactor is based on a real example from my book React Anti-Patterns, and it’s something every frontend developer runs into eventually.
If you enjoyed this episode, give it a thumbs-up, subscribe, and let me know what you'd like to refactor next!
Resources & Links
📘 React Anti-Patterns (Book): https://www.amazon.com/dp/1805123971
📨 Newsletter: https://juntao.substack.com
💻 Code Example: https://github.com/abruzzi/react-anti...