React.memo vs React.PureComponent for function components

Question

Right now my app uses functional components exclusively.

I was wondering, if I have a component that should really be a pure component. To get a bit more performance, should I

I rewrite my code to a class component that extends React.PureComponent
Use React.memo HoC to wrap my existing functional component?
~~Use Recompose.pure HoC to wrap my existing functional component?~~
or just leave it alone since function components are pure already (not sure if this statement is correct)

This isn't premature optimization, the code is obviously pure, I am just wondering what is the ~~recommended~~ correct way to do it. This isn't really an opinion based thing because there should only be one way to make function components pure.

I'm leaning towards converting to a React.PureComponent, since I am presuming React.memo will use memory regardless where as the PureComponent would have different optimizations.

References:

React.memo performance is worse than with React.PureComponent talks about the performance being worse with React.memo but the answers talk about an improper optimization by uglify.
Recompose pure() vs React.PureComponent talks about how pure is aimed at functional components.
per the comment and announcment by Recompose.pure it appears that it may not be needed at all.

Minor Note: They're *function* components, not *functional* components. Function components are often not [*functional*](https://en.wikipedia.org/wiki/Functional_programming) in the FP sense. — T.J. Crowder, Dec 07 '22 at 18:05
This seems too opinion-based for SO's format, with the exception that it seems like you can rule out `Recompose.pure` as [the author said hooks do all that it did and they won't be maintaining it](https://github.com/acdlite/recompose#a-note-from-the-author-acdlite-oct-25-2018). That leaves you with `React.memo` and `PureComponent`, both of which do the same thing in slightly different ways. It really comes down to: do you want to write function components or class components? — T.J. Crowder, Dec 07 '22 at 18:07
Unless you're actually noticing a performance hit with the component (ie you've profiled it) it's probably not worth the optimisation. — Andy, Dec 07 '22 at 18:08
[^^](https://stackoverflow.com/questions/74721088/react-memo-vs-react-purecomponent-vs-recompose-pure-for-functional-components#comment131878167_74721088) Avoid premature optimization. (But do optimization when you have indeed noticed an issue.) — T.J. Crowder, Dec 07 '22 at 18:09
I edit the question text. Since there should be a single correct way to convert a function component to a pure component (is it memo or rewrite to class component). I'll wait for someone else to vote to re-open (even if I can) in case it's not enough. — Archimedes Trajano, Dec 09 '22 at 19:09

score 0 · Accepted Answer · answered Dec 15 '22 at 19:43

TL;DR: memo

Per the documentation of PureComponents

We recommend to define components as functions instead of classes. See how to migrate.

They have this example

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

should be

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

They also added this note as a bonus

Unlike PureComponent, memo does not compare the new and the old state. In function components, calling the set function with the same state already prevents re-renders by default, even without memo.

React.memo vs React.PureComponent for function components

1 Answers1