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.
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).
Does this obsolete PureComponent
?
Not immediately, I think PureComponent
is a bit more optimized right now. It could though. We'll see.
PureComponent is optimized for classes. It鈥檚 less optimized than pure + function.
I'll close since it's intentional. Feel free to adjust docs in https://github.com/reactjs/reactjs.org.
Most helpful comment
Not immediately, I think
PureComponent
is a bit more optimized right now. It could though. We'll see.