It's a kinda silly question but can I use useCallback and useMemo in React class (or equivalent solution)? Is it a good practice?
The workaround I found is to use a package named Memoizee: https://www.npmjs.com/package/memoizee. However, this is a 3rd package (is there any React built-in solution?)
Since my old component is React class, it will take a pretty amount of time to convert it to React Hooks
For useCallback it's pretty easy to get. With class properties syntax(to store value between renders) and arrow function expression(to bind this) you can do that:
onClick = (e) => { this.setState({ clicked: true }); }
...
render() {
...
<button onClick={this.onClick}
And sure, you can just do that in constructor, if don't want to include babel plugin to support class properties:
constructor() {
this.onClick = this.onClick.bind(this);
}
onClick(e) {
this.setState({ clicked: true });
}
As for useMemo you may utilize any existing package for that, say lodash's _.memoize.
Just to highlight: useMemo hook is rather for preserving referential equality (say, if some function returns an array or an object than calling that function on each render would provide referentially different result on each run). So as alternative to memoization you may just check if some dependencies have been changed in componentDidUpdate and once they did - calculate some new data and, say, write it to state or directly to this(say, if that's timed ID returned from setTimeouer)
useCallbackanduseMemo, so it's a bit misleading. You should change the question, and add some code that you tried. Unless you want to get voted down, and get the question closes for other reasons. However, there're lots of hookless memoize in react questions/answers around.