React.js Succinctly®
CHAPTER 5
Composability
Several React components can be combined to produce another React component. This is one of the best features of React. It’s a simple concept with great advantages.
Composability enables abstraction and allows us to understand code without having to care about all the details all the time. If a Profile component is composed of a ProfilePicture component and a ContactInformation component, we’ll have a pretty good idea about what’s going on there without looking at the details of each component.
Composability also enables a more uniform behavior. If we have a ContactInformation component, whenever we need to display a person’s contact information, whether that person is a guest, client, vendor, or employee of your business, we can uniformly use the ContactInformation component. This also means less repetition of code in any UI that represents a contact information section.
Every time we reuse a component to write another, we are cashing out our original time investment that we put into creating the original one.
The most important benefit of composability, however, is that it allows us to separate the different concerns of our applications with great flexibility.
Let me explain composability with an example. Let’s try to describe Twitter’s account page with components.
Figure 2: Twitter’s User Profile Page
A simplified component list for this page could be something like the following (omitting the details of every component for brevity):
Code Listing 33: Twitter UserHomepPage
class Avatar extends React.Component { render() { return <img ... />; } } class UserInfo extends React.Component { render() { // name, bio, ... } } class Counts extends React.Component { render() { // tweets, following, ... } } class Tweets extends React.Component { render() { // The list of tweets. } } class UserHomePage extends React.Component { render() { return ( <div> <Avatar src={} /> <UserInfo user={} /> <Counts tweets={} following={} ... /> <Tweets list={} /> </div> ); } } |
Understanding the hierarchical relationships between components here is important. Since Avatar, UserInfo, Counts, and Tweets all appeared in the render method for UserHomePage, this makes UserHomePage the owner of them.
An owner component can set the props of the components it uses in the render method. For example, the src property for the Avatar component was passed to it from its owner, UserHomePage.
Component children
Just like we can include HTML elements within the opening and closing tags of another HTML element, we can also include React elements within the opening and closing tags of another React element. We can mix HTML elements and React elements in both cases.
Example:
Code Listing 34: Children Example
<Counts> <TweetsCount /> <FollowingCount /> <FollowersCount /> <LikesCount /> </Counts> |
The inner elements (TweetsCount, FollowingCount, etc.) are called the “children" of the outer element (Counts). Within the definition of the Counts component, we can access the list of children used within any instance of the component using the special this.props.children property.
Example:
Code Listing 35: this.props.children
class Counts extends React.Component { render() { <div id="counts-headers"> {this.props.children} </div> } } |
React’s tree reconciliation process uses the order of the children in the diffing algorithm. This unfortunately means that if a child is removed from the tree, all siblings after it will need to getbe updated in the process. Be aware of this problem.
This problem becomes a serious one when the children are driven by a dynamic array that can be shifted and unshifted. It’s also a problem when the elements of that array getare shuffled.
To force React to respect the identity and state of each child in a list, we need to uniquely identify each child instance by assigning it a key prop.
Code Listing 36: key pProp
class ProductList extends React.Component { render() { return ( <div> {this.products.map(product => <Product key={product.id} product={product} />)} </div> ); } } |
We used product.id here as the special key prop for the Product component.
React will actually warn us if we do not supply a unique key to a mapped array. Take that warning (—and all React’s warnings, really) —seriously.
Note that this key prop cannot be used within the Product component definition—it will not be available as this.props.key.
Do not use the index of the array elements as the key value here. If you do that, when you remove an element from the array, you would practically be changing the identities of the children, and you’ll get very unpredictable behavior.
One-way data binding flow
When owners set the props of owned components, they are doing one-way data binding there. The owner will most likely bind the props of its owned components based on some computations on its own props and state. This process happens recursively, and any changes in the computations for the top-level owner component will be automatically reflected everywhere down the chain where they’re passed to other components.
- 80+ high-performance, modular, and responsive React UI components.
- Popular components like Data Grid, Charts, and Scheduler.
- Lightweight and user-friendly.
- Stunning built-in themes.