用无状态组件反应备忘录

Question

Before react introduce memo and hook All functional component was stateless.

After Introducing memo and hook I'm little confused with these two concept.

Is React.memo for functions that use hook only ?

Should I update all my stateless functional component to React.memo for optimizing? Or react optimize it when a function does not use hook automatically?

Answer 1

For understanding what React.memo is used for, first you have to understand the difference between React.Component and React.PureComponent .

From the docs -

The difference between them is that React.Component doesn't implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

React.memo is the same as a React.PureComponent , just for the functional components. So, if you think that with a given props, your component will be rendered the same, you can wrap your component with React.memo for performance boost and memoizing the result as mentioned in the docs .

But do specifically take a look at the line in the docs, which says -

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

And you should make your decision about using React.memo irrespective of the hooks .

Answer 2

React.memo is equivalent to shouldComponentUpdate and PureComponent for functional components. It performs a shallow comparison between current and next props and doesn't have anything to do with local state introduced by hooks . You still use it to prevent useless renders by comparing props to determine if they changed or not:

const Component = props =>{
    //even with memo changes in local state still trigger a new render
    const [state, setState] = useState({foo: 'foo'})
}

export default React.memo(Component) //Won't rerender unless props changes