Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React.useMemo in class component

Is there a way to use this hook or some its analogue of the React API in the case of a class component?

I'm wondering, should I use some third party memo helpers in the case of a class component (eg. lodash memo, memoizeOne, etc.) or there is exist some official react API way for class components.

Thanks for any help.

P.S.

I want to generate uuid in the case of changed Children.

with SFC component I could use useMemo like this

const keyValue = useMemo(() => uuid()(), [children])

But how to achieve the same for class-based components without any thirdparty, etc.
P.P.S. I'm not using Redux, etc. only pure React.js

like image 872
Velidan Avatar asked May 21 '20 08:05

Velidan


People also ask

Can useMemo be used in class component?

Don't use React Memo if the component isn't heavy and renders with different props altogether. Wrapping a class-based component in React Memo is undesirable and therefore should not be used. Instead, you can extend PureComponent or implement shouldComponentUpdate() method.

Can we use React memo in class based component?

React has the features PureComponent and memo hook which allow us to implement memoization in React. PureComponent allows us to perform optimization. It depends on the shouldComponentUpdate() lifecycle method but it can only be used with the class component.

In which situation would you use useMemo () in React?

The React useMemo Hook returns a memoized value. Think of memoization as caching a value so that it does not need to be recalculated. The useMemo Hook only runs when one of its dependencies update.

Can you call a hook in a class component?

You can't use Hooks inside a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component.


1 Answers

As per React docs:

If you want to re-compute some data only when a prop changes, use a memoization helper.

The docs use memoizeOne as library, so this would be a good choice. You can also change keyValue as part of a side effect with componentDidUpdate:

componentDidMount() {
  this.keyValue = uuid()()
}

componentDidUpdate(prevProps) {
  if (this.props.children !== prevProps.children) {
    this.keyValue = uuid()()
    // alternative: store keyValue as state to trigger re-render
  }
}

getDerivedStateFromProps can be an alternative for rare cases, other options are usually preferred.

Why useMemo is not a good choice with uuid()

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. (docs)

A memoized value const keyValue = useMemo(() => uuid()(), [children]) might be re-calculated despite children being the same in React future. This case could lead to inconsistencies, if uuid() returns a new id, but children haven't changed.

For function components an alternative is useRef with useEffect depending on your use case.

like image 145
ford04 Avatar answered Sep 16 '22 15:09

ford04