Type of React Components

React Class Components

React Class Components were introduced with JavaScript ES6, because JS classes were made available to the language. Sometimes they are called React ES6 class components as well. Having at least JavaScript ES6 at your disposal, you no longer had to use React’s createClass method. Finally classes come with JS itself:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    return (
      <div>
        <h1>Hello React ES6 Class Component!</h1>
        <input
          value={this.state.value}
          type="text"
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

A React Component written with a JavaScript class comes with methods like the class constructor – which is primarily used in React to set initial state or to bind methods – and the mandatory render method to return JSX as output. All the internal React Component logic comes from the extends React.Componentvia object-oriented inheritance that is used in the class component. However, it isn’t recommended to use the concept of inheritance for more than that. Instead, it’s recommended to use composition over inheritance.

Note: An alternative syntax can be used for a JavaScript class used for React components, for instance, to autobind methods to React components by using JavaScript ES6 arrow functions:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }
  onChange = event => {
    this.setState({ value: event.target.value });
  };
  render() {
    return (
      <div>
        <h1>Hello React ES6 Class Component!</h1>
        <input
          value={this.state.value}
          type="text"
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

React class components offer several lifecycle methods for the mounting, updating, and un-mounting of the component as well. In case of our local storage example from before, we can introduce it as side-effect with lifecycle methods – to save the latest value from the input field to the local storage – and in our constructor for setting the initial state from the local storage:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: localStorage.getItem('myValueInLocalStorage') || '',
    };
  }
  componentDidUpdate() {
    localStorage.setItem('myValueInLocalStorage', this.state.value);
  }
  onChange = event => {
    this.setState({ value: event.target.value });
  };
  render() {
    return (
      <div>
        <h1>Hello React ES6 Class Component!</h1>
        <input
          value={this.state.value}
          type="text"
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

By using this.state, this.setState(), and lifecycle methods, state management and side-effects can be used side by side in a React class component. React class components are still actively used, even though React Function Components, which are shown in this article later, are more actively used than ever in modern React applications, because they are not anymore behind React Class Components feature-wise.

React Function Components

React Function Components are the equivalent of React Class Components but expressed as functions instead of classes. In the past, it wasn’t possible to use state or side-effects in Function Components – that’s why they were called Functional Stateless Components – but that’s not the case anymore with React Hooks which rebranded them to Function Components.

***Now Functional component are fully equivalent to class based components ***

React Hooks bring state and side-effects to React Function Components. React comes with a variety of built-in hooks, but also the ability to create custom hooks for yourself or others. Let’s see how the previous React Class Component can be used as a React Function Component:

const App = () => {
  const [value, setValue] = React.useState('');
  const onChange = event => setValue(event.target.value);
  return (
    <div>
      <h1>Hello React Function Component!</h1>
      <input value={value} type="text" onChange={onChange} />
      <p>{value}</p>
    </div>
  );
};

The previous code only shows the Function Component with the input field. Since component state is needed to capture the state of the input field’s value, we are using the built-in React useState Hook. We will cover these hooks in coming sessions.

React Hooks were also introduced to bring side-effects to Function Components. In general, the built-in React useEffect Hook is used to execute a function every time props or state of the component are changed: