Anatomy of a React Component — Props 💌
This is part three of a series on the Anatomy of a React Component, check out the other parts here!
Props are my personal favorite feature of React. They’re awesome because they allow sending information from parent to child. Using them provides a means for composing and creating diverse, dynamic relationships between components.
What can they do?
Props are React’s primary method of passing data into components. This can be useful for customization, specifying content, or creating custom component compositions to match a specific need. By including a prop in the form <Component prop={value} />, your Component instance will have access to value in its props, typically something like this.props.prop. This allows the component to use that information for all sorts of stuff internally. Additionally, the real win we get with this prop is that if value changes, the component will re-render automatically!
How do they work?
React passes a props object as the first parameter when initially creating component instances. This is why we had to include super(props) in our constructor in the previous chapter. The props object can be deconstructed by our component, ignored, or passed to its own children. It functions exactly like any normal object in JavaScript. It is typically bad practice to directly mutate the props object, however, and any changes of this type are likely to be lost on re-render.
When do they update?
Props only update when whatever is passing them decides to update them. This is typically another component in your application. In the example below, the App component creates three Child components. In each case, it passes different props. If any of these props were to dynamically change during runtime, any child being passed those props would receive the update and re-render. This is immensely useful and one of the main ways of making dynamic applications in React.
Why do we need it?
Passing information around allows us to create more than just static components. Using props, we are able to make interchangeable pieces for our site that are capable of performing complex tasks and displaying the results. In the example, we pass in different children and title props for each of the Child components. This means that each child will render something completely separate from the others. It also means that we can easily create any number of children with any number of different properties!
Children
React also includes a built-in prop that we can use to our advantage. You may notice in the example below that some of our Child components have text between their opening and closing tags. React puts whatever is included here into the prop children. This means we can use our components like normal HTML tags, nesting children inside our component and acting on them like we would any prop. By utilizing this syntax helper, our JSX is free to look nice and clean!
Render Props
Render props are a special prop sub-category popular in the React community. It is based on the idea that we can pass (typically as a prop called render) a function that takes some information from the component and renders a custom result. This lets us create “wrapper” components that rely on the render prop that is passed in to know what to display on the page. These props can be useful for extracting complex logic that is used in multiple places where the final rendered result varies widely. Check out “Use a Render Prop!” for a more detailed dive!
Best practices
- Pass only what the child needs — If you pass unnecessary props “just in case”, it can make your code difficult to read about and make your components too complicated
- Don’t pass more than two levels deep — Passing props to a child just so that child can pass the props to its own children can become confusing quickly. Instead, use an external state store or the context API if you need the same info in many places
- Be careful with boolean “flags” — Simple props like “isMobile” can seem like a great way to control the rendering of child components, but often become difficult to reason about. Instead, make a mobile and standard version of your component, and decide which of those to render in the parent. This prevents god-components that have the ability to render hundreds of different versions of themselves based on a number of different flags
That’s it for props! They are quite easy to use, but allow us to create wonderfully dynamic components. Check out the main article for info on other React bits, and follow me to hear about more articles like this.
Also, check out my Twitter to be notified when I make something new (and for other nonsense). Be sure to leave a comment and let me know if I missed anything!
