question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it intended that React.memo() also works with class components?

See original GitHub issue

Do 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:closed
  • Created 5 years ago
  • Reactions:12
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
gaearoncommented, Oct 24, 2018

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 or forwardRef() result). But documenting this risks obscuring the primary use case (memoized function components).

8reactions
gaearoncommented, Oct 24, 2018

Not immediately, I think PureComponent is a bit more optimized right now. It could though. We’ll see.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found