Is it intended that React.memo() also works with class components?
See original GitHub issueDo you want to request a feature or report a bug? Clarification in the documentation, or more strict input validation.
What is the current behavior?
Currently, React.memo() is documented to receive a functional component, but it actually works correctly even if given a class component. I discovered this while looking into the code for writing the types in https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29990.
The following code demonstrates that it works (both the rendering and the console.log(ref)):
const Test = React.memo(class extends React.Component {
render () {
return <h1>TEST</h1>
}
})
ReactDOM.render(
<Test ref={ref => { console.log(ref) }}/>,
document.appendChild(document.createElement('div'))
)
What is the expected behavior? Only functional components are documented as valid arguments, so either class components should also be documented as supported, or React.memo should reject the argument.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:12
- Comments:5 (4 by maintainers)
Top Results From Across the Web
When should you NOT use React memo? - Stack Overflow
memo . React.memo was originally intended to be built into the core of functional components, but it is not used by default due...
Read more >Use React.memo() wisely
React.memo() increases the performance of functional components by preventing useless renderings. But such performance tweaks must be ...
Read more >What is React Memo and How to Use it? - Hygraph
React Memo is a higher-order component that wraps around a component to memoize the rendered output and avoid unnecessary renderings. This ...
Read more >Memoization in React js - Topcoder
React also gives us a memo() hook to apply memoization for functional components. If we need a function component that gives the same...
Read more >Hooks FAQ - React
You can't use Hooks inside a class component, but you can definitely mix classes and ... The calls to act() will also flush...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Yeah we should probably document that it works with classes. It’s intended to work with any valid component (including more exotic ones like
lazy()result orforwardRef()result). But documenting this risks obscuring the primary use case (memoized function components).Not immediately, I think
PureComponentis a bit more optimized right now. It could though. We’ll see.