xxxxxxxxxx
export function MyReactComponent({ myNumber }) {
return <p>{myNumber * 5}</p>
}
export default React.memo(MyReactComponent, function areEqual(
prevProps,
nextProps
) {
if (prevProps.myNumber !== nextProps.myNumber) {
return false
}
return true
})
xxxxxxxxxx
/* this is for es6 onward */
/* React.memo is the new PureComponent */
import React, { memo } from 'react'
const MyComponent = () => {
return <>something</>
}
export default memo(MyComponent)
xxxxxxxxxx
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
xxxxxxxxxx
const MyComponent = React.memo(function MyComponent(props) {
/* only rerenders if props change */
});