# How to Avoid Prop Drilling in React > Strategies and patterns to solve the prop drilling problem in React applications - Author: Franklin Javier - Published: 2022-12-07 - Language: English - Tags: react, frontend - Canonical: https://blog-preview.imfrank.dev/blog/avoid-prop-drilling-react/ Prop drilling is a common pattern in React where you need to pass data through multiple intermediate components to reach the component that actually needs it. This becomes problematic because it makes code harder to maintain and reduces component reusability. ## The Problem When you have a deep component hierarchy and need to pass data from the top to the bottom, you end up having to pass props through all the middle components, even if they don't use that data. ## Solutions ### 1. Intermediate Components Create wrapper components that receive and forward props down the hierarchy. This can better organize the structure, but doesn't completely eliminate the problem. ### 2. React Context Use React's Context API to "pass data to nested components without manually passing props at every level". This is the most common solution and recommended by React itself. ```javascript const ThemeContext = React.createContext('light'); function App() { return ( ); } ``` ### 3. React Hooks Use hooks like `useContext` to access context in a simplified way: ```javascript function ThemedButton() { const theme = useContext(ThemeContext); return