Good day Devs, to my fellow beginners starting out with React framework, this one's for you. I will be trying to explain the meaning or more like the idea behind props and its importance. Now I am not here to tell you what’s already written in the React.js docs but to explain deeper using an illustration. It took me a while to understand this as a beginner but I like to think of props as a doorway to your various components, let me explain what I mean. Imagine your App as a big building, and each room as a component, simple right? But now let’s say there is an issue, because all rooms have no doors which makes the house useless if you don’t have access to these rooms, so now you’re stuck and you can’t even get in. It’s the same thing that happens in React, as your App gets bigger you have to break it down to individual components which are like rooms in your big house. So that’s when the use of Props comes in, it serves as a doorway into these rooms granting you access, not just into your building but also into various rooms which are in your component tree.
How does it work?
When you watch tutorial videos and check the docs, you see or hear stuff like passing down props through components and stuff like that, so what does that mean exactly? Okay back to our simple example, pay attention because it’s about to get a little bit weird. As I said earlier props serve as the doorway, but how? By passing it as a parameter, or even de-structuring it (if you are not familiar with arguments, parameters & de-structuring try and read on them).
The code above shows the parent App returning a component ‘Bedroom’ which passes down string texts (at times it can also be functions, reference to functions or state) as props through bed and mirror, so the bed and mirror props can be used in the Bedroom component as seen below.
From the code above, they both give the same output but the difference is that the second one was destructured to avoid writing props every time you want to call it (most people use the second option because it looks cleaner but which ever way is totally fine.
When things starts to get Messy
One of the issues with props is that things can get messy real quick, for instance you are building a large app or not too large but you broke it down to various components. And you need to pass things from your parent components all the way down to various children components. Too many coding words, let's move on to our building example, but now let’s imagine the building as a bank or an institute. Say the manager wants to tell the clerk downstairs something but not just him, also the security guard at the gate and still the cashier in the hall. So he now needs to create doors (props) to various offices to pass through even if he is not needed there (passing props through components that don't need it just to get to the final component that needs it). Imagine the manager keeps on doing this every time he wants to communicate, that’s just messy. It’s what we developers call “props drilling”. Like drilling for oil, but now its props you’re drilling. What’s the way out? The concept of “State Management” comes to play, although that’s not what I will be writing about today. This allows you to communicate with different components in the app without passing them through components that don't need them, this is done by creating a store that stores all your state and it can be called from any component. Now imagine the whole company is wired with a telephone, and all the manager has to do is just pick up the phone and talk to the clerk, cashier and gateman without passing through offices (components) which he doesn't need to pass through. Think of state management as that telephone. A good example is an external library called Redux (it’s very good for building large apps that manage a lot of state). Also there is a react hook called ‘useContext’ that does the same but with lesser boilerplate (means wiring things up) compared to Redux.
Then are props useful in larger apps?
Yes it is, because as your application gets larger and you break things down into smaller components, props can be passed used just between those smaller components that need them. The importance of props in React cannot be overemphasized. That’s all for now, Thank you.