Describe pure components.

Difficulty: 5/10

shouldComponentUpdate, memoization, performance optimization

A React component can be considered pure if it renders the same output for the same state and props. They are the components that do not re-render when the value of props and state has been updated with the same values thus they improve performance.

1
Pure components have some performance improvements and render optimizations since React implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.
2
For class components like this, React provides the PureComponent base class. Class components that extend the React.PureComponent classes are treated as pure components.
3
To create a pure functional component in React, React provides a React.memo() API. Using the React.memo() API, the React functional component can be wrapped as follows to get the React Pure Functional Component.

Since most modern React is functional, we use the memo Higher-Order Component (HOC) to achieve the same result.

Let's talk about some of the features of react pure component

1
They prevent the re-rendering if props and state are the same by a Shallow comparison of state and props
2
They handle shouldComponentUpdate implicitly
3
Increases performance.

The Shallow checks: Because React uses a shallow comparison (using the Object.is algorithm), it only checks the memory references of objects and arrays, not their internal values.

1
Primitives: If props.count changes from 5 to 5, it won't re-render. (Correct)
2
Objects/Arrays: If you pass a new array literal [1, 2, 3] every time the parent renders, the Pure Component will re-render because the memory reference is different, even if the numbers inside are the same.

Scenario Questions

0-2 years experience

Follow-up Questions

A React component can be considered pure if it renders the same output for the same state and props. They are the components that do not re-render when the value of props and state has been updated with the same values thus they improve performance.

1
Pure components have some performance improvements and render optimizations since React implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.
2
For class components like this, React provides the PureComponent base class. Class components that extend the React.PureComponent classes are treated as pure components.
3
To create a pure functional component in React, React provides a React.memo() API. Using the React.memo() API, the React functional component can be wrapped as follows to get the React Pure Functional Component.

Since most modern React is functional, we use the memo Higher-Order Component (HOC) to achieve the same result.

Let's talk about some of the features of react pure component

1
They prevent the re-rendering if props and state are the same by a Shallow comparison of state and props
2
They handle shouldComponentUpdate implicitly
3
Increases performance.

The Shallow checks: Because React uses a shallow comparison (using the Object.is algorithm), it only checks the memory references of objects and arrays, not their internal values.

1
Primitives: If props.count changes from 5 to 5, it won't re-render. (Correct)
2
Objects/Arrays: If you pass a new array literal [1, 2, 3] every time the parent renders, the Pure Component will re-render because the memory reference is different, even if the numbers inside are the same.