ReactJS — Prop Drilling

What is prop drilling?
Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

The image above shows the data flow when you want to pass the data from the parent component to the last child component. To pass this data from the top level to the last child component, you must pass props to every child component. For example, in alphabetical order: if you have a Data in the A component and you want to pass that data to the Z component, the props need to be passed through B, C, D, E child components, and so on until you get to the Z component.

When developing a small project, prop drilling won’t be a problem; this will not be the best approach when you have to build or work on a big application.

How to fix prop drilling?
There are a few ways to prevent doing pro drilling and with state management, some developer use the State Management Redux or createContext. createContext is an API that come build in with react

If you want to go more deep and learn more about the state management createContext and Redux go to the following link bellow.

createConext here
Reduxhere

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Luis Castillo

Luis Castillo

Software Engineer / Full-Stack Developer in Ruby, Ruby on Rails, JavaScript, ReactJS, Redux, SQL, HTML5, CSS3