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:
Controlled Components
Stateless Functions
Conditional Rendering
Rendering Child Components
Stateless Functions
Stateless functions are plain Javascript functions. When you create a React component you usually create a class that extends React.Component or 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!
Conditional Rendering
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 false.
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 intoNotification 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.
Controlled Components
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 ref prop and the normal JavaScript DOM API. Compare this to a controlled component. Within a controlled component, the ReactJS handler manages the state for you, like so:
In this example, React manages the value. When the user adds some text the value is stored within a parameter managed by React, instead of the DOM. I've been using React for over a year and a half and so far I have yet to find a great reason to use uncontrolled components. In most instances like form building, I have always found better alternative solutions than having to resort to this pattern, however, a lot of tutorials you see online will mention it. If you have some legacy Javascript code that you need to use within your ReactJS application, uncontrolled components can make it easier to work with them. Unless you have a very good reason you should always use controlled components.
Controlled Or Uncontrolled Form Components With React
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 🤘
