In this tutorial, you will learn about four design patterns that you can use when building an application with React.JS. 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 React, however, when you are getting started these are the ones I recommend using:

  • Controlled Components
  • Stateless Functions
  • Conditional Rendering
  • Rendering Child Components

Controlled Components

As the name implies a controlled component is a component where React manages updating the DOM for you. Take this example:

import React from 'react';

export default App = () => (
  this.textbox = React.createRef();
  return (
    <div>
        <input type="text" ref={this.textbox} />
    </div>
  )
);

This component is uncontrolled because the value is stored within the real DOM Node. React does not store the value in application 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.

In a controlled component, React manages the state for you, like so:

import React, { useState } from 'react';

export default App = () => {
  const [value, setValue] = useState('');
  const onChange = event => setValue(event.target.value);

  return (
    <div>
        <input type="text" onChange={onChange} text={value}/>
    </div>
  );
};

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. If you have some legacy Javascript codes you want to use that were not written for React, then 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

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:

import React from 'react';

export default ({message}) => {
 return <div class="loading">{message}</div>
}

Stateless functions are usually really simple components. As you can see from the simple example above, properties are directly rendered. When you come to view your code, it's very quick and easy to understand what a stateless component it doing.

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:

render() {
  const { isLoading } = this.state;
  return (
    <div
        {isLoading && (
            return <p>Loading</p>
        )
        }
    </div>
  )
}

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 set, include this. The JSX will be skipped when the condition is false.

Rendering child components

React provides a useful property called 'children' that allow you to pass JSX into other components to be rendered. When dealing with a nested component, the parent decides the JSX and passes it down. Take:

import React, { Component } from 'react';

export default class Notification extends Component {
  render() {
    const { children } = this.props;
     return (
      <div className="notification">
            {children}
      </div>
    );
  }
}

To pass data into Notification you could write code, similar to:

<Notification>Please Login</Notification>

In the example above, the text 'please login' is passed in-between the two notification tags. When you pass JSX into another component like this, React 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. Children is quite a powerful tool as it allows you to pass data into your components without you having to write millions of props.

That brings us to the end of my quick introduction to some of the patterns you can use within 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.