Use hooks in React class components
npm install react-hookable-componentUse hooks in class-based components.
Simply replace extends Component or extends PureComponent with extends HookableComponent or extends HookablePureComponent.
You can then use hooks in the render() method.
``tsx
import { HookableComponent } from 'react-hookable-component';
// 👇👇👇👇👇👇👇👇
class ComponentThatUsesHook extends HookableComponent
render() {
// 👇👇👇👇👇👇
const value = useSomeHook();
return The value is {value};
}
}
`
* UNSAFE_componentWillUpdate is not called for update triggered via hooks.render()
* Hooks only work in method. (But you can save the result to a field in this and use that from elsewhere.)render()
* must be a class method defined in the prototype.
`tsx
// ✅ This works
class MyComponent extends HookableComponent
render() {
// ...
}
}
// ❌ This doesn't work
class MyComponent extends HookableComponent
render = () => {
// ...
}
}
// ❌ This also doesn't work
class MyComponent extends HookableComponent
constructor(props: Props) {
super(props);
this.render = () => {
// ...
};
}
}
`
method into a functional component so hooks work.
The render() method still have access to the class instance's this.Want to know more? The code is really short, just go take a look.
Live Demo
On CodeSandboxCommon Use Recipes
$3
This example shows usage of two React contexts.
`tsx
class MyComponent extends HookableComponent {
myContextValue: null | TMyContext = null;
render() {
// Simply use useContext.
const myContextValue = useContext(MyContext);
// You can save it to this so it can be accessed by other methods later.
this.myContextValue = myContextValue; // Use as many contexts as you want.
const anotherContextValue = useContext(AnotherContext);
// ...
}
}
`
$3
This example shows usage of useMemo.
`tsx
class MyComponent extends HookablePureComponent {
expensiveComputation = () => {
let result = 0;
for (let i = 0; i < 1000; i++) {
result += this.props.computationInput;
}
return result;
}
render() {
const expensiveAnswer = useMemo(this.expensiveComputation, [this.props.computationInput]);
return The answer is {expensiveAnswer};
}
}
`
FAQ
#### eslint complains about using hooks in class components.
Do
// eslint-disable-next-line react-hooks/rules-of-hooks.#### I'm not extending
Component or PureComponent, but rather my own class.
In that case you can use makeHookable instead.
`tsx
import { makeHookable } from 'react-hookable-component';class MyComponent extends MyCustomComponentClass {
constructor(props: Props) {
super(props);
// ...
makeHookable(this); // 👈 this right here at the end of constructor!
}
}
``#### I don't want to use hooks in class components. I would rather make hooks out of classes!
Use class-based-react-hooks.