Sometimes, we want to use React hooks in a React class component.
In this article, we’ll look at how to use React hooks in a React class component.
Use React Hooks in a React Classic class Component
To use hooks in a class component, we can create a functional component that’s used as a higher-order component.
For instance, we can write:
const withHook = (Component) => {
return WrappedComponent = (props) => {
const someHookValue = useSomeHook();
return <Component {...props} someHookValue={someHookValue} />;
}
}
We used our useSomeHook hook in our withHook component.
Then we pass the hooks’s output value into the Component , which can be any component, including a class component.
Then we can use it by writing:
class Foo extends React.Component {
render(){
const { someHookValue } = this.props;
return <div>{someHookValue}</div>;
}
}
export default withHook(Foo);
We passed in Foo into our withHook higher-order component so that we can use our hook in the withHook HOC.
Conclusion
To use hooks in a class component, we can create a functional component that’s used as a higher-order component.
