How to Use Hooks in Class Components

Ever since React version 16.8, the community of developers have embraced hooks for their convenience and simple interface. Built-in hooks like useState and useEffect make it possible to maintain the state in functional components and set up lifecycle methods.

More importantly, many libraries have switched to supporting hooks instead of custom components or utilities compatible with class components. This forces a question, is it possible to use hooks in React class components?

Developers still need the powerful functionality of custom hooks but might have to find alternative ways to use them. If you’re in the same boat, follow this guide on using hooks in class components.

Use Hooks in React Class Components

Since the introduction of hooks, many React developers have decided to refactor dozens of class components into functional components.

That might not be possible if your application contains hundreds of class components. It will take too long to refactor.

Some developers prefer a class syntax and don’t want to write functional components.

Unfortunately, class components don’t support hooks, and there is no way to use hooks within them. The only practical way to utilize hooks within class components is to mix the two types of components in a single tree.

In theory, using hooks, you could use functional components to generate value and pass down that value through props to class components.

Alternative Way to Use Hooks in React Class Components

This is a simple example of using values from hooks in a Class Component. Let’s look at an example.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(100);
  return (
    <div className="App">
      <Header hookValue={number}></Header>
    </div>
  );
}
class Header extends React.Component {
  render() {
    const someHookValue = this.props.hookValue;
    return <h1>{someHookValue}</h1>;
  }
}

We import the useState hook to create a number state variable, initialized to a number value.

The child component is a Header class component. We pass down the number state variable, which we created using a hook.

Then we display this value in the child component. Look at the live demo on CodeSandbox yourself.