Search⌘ K
AI Features
Home
Courses
The Road to React: The One with Hooks

React Class Components

Explore the evolution of React components by understanding class components and how they handle state and side-effects using lifecycle methods. Learn to distinguish legacy React features from modern function components and Hooks, giving you a foundation for maintaining older React codebases.

We'll cover the following...

React has changed a lot since 2013. The iterations of its library, how React applications are written, and especially its components have all changed drastically. However, many React applications were built over the last few years, so not everything was created with the current status quo in mind. This section of the course covers React’s legacy.

I won’t cover all that’s considered legacy in React, because some features have been revamped more than once. You may see the previous iteration of the feature in older React applications, but will probably be different than the current.

Throughout this section we will compare a modern React application to its legacy version. We’ll discover that most differences between modern and legacy React are due to class components versus function components.

Note: The live execution of modern React application and its legacy version is shown at the end of this chapter.

React Class Components

React components have undergone many changes, from createClass components over class components, to function components. Going through a React application today, it’s likely that we’ll see class components next to the modern function components.

Node.js
class InputWithLabel extends React.Component {
  render() {
    const {
      id,
      value,
      type = 'text',
      onInputChange,
      children,
    } = this.props;
    return (
      <>
        <label htmlFor={id}>{children}</label>
        &nbsp;
        <input
          id={id}
          type={type}
          value={value}
          onChange={onInputChange}
        />
      </>
    );
  }
}

A typical class component is a JavaScript class with a mandatory render method that returns the JSX. The class extends from a React.Component to inherit (class inheritance) all React’s component features (e.g. state management for state, lifecycle methods for side-effects).

One of the biggest differences in these legacy components is how they handle side-effects using React lifecycle methods. While modern React uses the useEffect hook, class components rely on specific methods like componentDidMount, componentDidUpdate, and componentWillUnmount to run code at specific points in time. React props in this context are accessed via the class instance using the this keyword.

Node.js
const InputWithLabel = ({
  id,
  value,
  type = 'text',
  onInputChange,
  children,
}) => (
  <>
    <label htmlFor={id}>{children}</label>
    &nbsp;
    <input
      id={id}
      type={type}
      value={value}
      onChange={onInputChange}
    />
  </>
);

If no side-effects and no state were used in legacy apps, we’d use a function component instead of a class component. Before 2018–before React Hooks were introduced–React’s function components couldn’t handle side-effects (useEffect hooks) or state (useState/useReducer hooks). As a result, these components were known as functional stateless components, there only to input props and output JSX. To use state or side-effects, it was necessary to refactor from a function component to a class component. When neither state nor side-effects were used, we used class components or the more lightweight function component.

With the addition of React Hooks, function components worked the same as class components, with state and side-effects. And since there was no longer any practical difference between them, the community chose function components since they are more lightweight.

Exercises:

Quick Quiz!

1.

What is main difference between modern react apps and the legacy version?

A.

Differences between class components versus function components

B.

Difference in syntax

1 / 1