How to use hooks in React Class components

You're probably thinking, why on earth would anyone want to use a hook in a class based component, two words, legacy projects.

Hooks are cool and so are functional components, but if you're working on a 4 year old project that has loads of class-based components, you don't have the time to convert them to function based components. What's more, loads of newer libraries only use hooks.

So if you want to keep a legacy project up-to-date, this is a really helpful technique.

The code

import { Component } from 'react'; import { useNavigate } from 'react-router-dom'; class Login extends Component { render() { return ( <> <p>My awesome component</p> <button type="button" onClick={() => this.#handleClick()}> Click here </button> </> ); } #handleClick() { this.props.navigate('/dashboard'); } } function addHookTo(Component) { function CompWithHook(props) { const navigate = useNavigate(); return <Component {...props} navigate={navigate} />; } return CompWithHook; } export default addHookTo(Login); 

Aaaaand that's it!

Credit where credit is due

I could take all the credit and say my clever mind figured all this out but I actually saw it on the React Router website here -> https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it

They have a good example on there of adding multiple hooks.

Anyway, I hope you found this useful.