0

I need to know what is the meaning of shallow comparison when using PureComponent. Actually I read some treats but I could not understand the meaning of that so please simplify it.

An other question is, when we could use PureComponent and when using shouldComponentUpdate?

Deivison Sporteman
  • 2,170
  • 1
  • 16
  • 22

1 Answers1

0

About Shallow Comparison you can check this answer

https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react#:~:text=Shallow%20compare%20is%20efficient%20way,you%20don't%20mutate%20data.&text=shallow%20comparison%20is%20when%20the,comparisons%20deeper%20into%20the%20properties.

About shouldComponentUpdate [https://en.reactjs.org/docs/react-component.html#shouldcomponentupdate]

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

Basically, the component will be re-render every single change of state, if you want to prevent it, you can use the shouldComponentUpdate().

About PureComponent[https://blog.logrocket.com/pure-functional-components-in-react-16-6/]

A React component can be considered pure if it renders the same output for the same state and props. For class components like this, React provides the PureComponent base class. Class components that extend the React.PureComponent class are treated as pure components.

I do strong recommend you to read about React Hooks[https://en.reactjs.org/docs/hooks-intro.html] It makes easy to have PureComponents and to control when and how it should be re-render.

Regards.

Deivison Sporteman
  • 2,170
  • 1
  • 16
  • 22