In this tutorial, you will learn about four design patterns that you can use when building an application using ReactJS. A design pattern is an approach/technique for solving a problem in an understandable and efficient way. There are many different design patterns you can use with ReactJS, in fact, you would write a whole book on design patterns. That is why the focus of this post is on the four most used patterns. In this post we will cover:
Rendering Child Components
React.PureComponent. These components will provide a lot of backend state management for you which will make your applications run faster. If you are building a really simple component, then having all this background state management can be overkill. This is where stateless components are handy. Stateless functions do not store state, or, have any event handlers you can hook into, like the
componentWillReceiveProps(). When you create a stateless function you can only pass props into the render, like so:
The benefit of building a component using a stateless style is that it will be easy to understand and debug. When viewing your component, it's very quick and easy to understand what a stateless component is doing.
NOTE This post was written before React 16 where functional components become the norm and their performance was improved. Using React 16.8 and above, you can use hooks with these types of components, so unless you have a good reason not to, always favour building components in a functional style!
When you start writing React components, you will frequently want to render some JSX based on state. If something is enabled, render component X, otherwise, render component Y. You can achieve this through conditional rendering. You can add conditional rendering into a component using the curly brace syntax and some logic condition, like so:
This example shows how simple applying conditional rendering is. When the condition is true, e.g.
isLoading is set, then some loading JSX will be returned. Note the usage of the
&& which means when this is truthy, then run the second part of the condition. The JSX will be skipped when the condition is
Rendering child components
ReactJS provides a useful property called
children that allows you to pass either JSX or other components directly into a component. When dealing with a nested component, anything you add between the element tags is passed down as a
children prop, take:
To pass data into
Notification you could write code, similar to this:
In the example above, the text 'please login' is passed in between the two
Notification components tags. When you pass JSX into another component like this, ReactJS will add anything you pass in within a new property, called
children. In the
Notification component, you can render 'please login' use destructing to get
children from the props and then render it. The `children prop is a powerful approach for passing data into components without you having to write millions of props.
As the name implies a controlled component is a component where ReactJS manages updating the DOM for you. Take this example:
This component is uncontrolled because the value is stored within the real DOM rather than the virtual DOM. React does not store the value the applications state. If the user started adding text into the text box, the value would be directly added to the DOM. If you want to access that value, it's then up to you to query the DOM yourself via the
If you are interested in design patterns and you want to learn a little more, then I suggest you have a look at React Patterns. Happy Coding 🤘