Using PureComponent and React.memo to Improve Performance in React
Introduction PureComponent in React is built on the concept of Pure Function. In this article, let's dive into PureComponent and the memo hook in React, as well as how to apply these tools to improve performance in React applications. What is a Pure Function? First off, it's important to understand the concept of a Pure Function, which will always return the same result with the same input parameters. To put it simply, the same input will always yield the same output. For example: // this is pure function function sum ( a : number , b : number ): number { return a + b ; } sum ( 1 , 2 ); // always return 3 const offset = 3 ; // this is not pure function function sumWithOffset ( a : number , b : number ): number { return a + b + offset ; } sum ( 1 , 2 ); // result depend on offset value What is a Pure Component? In React, a PureComponent is considered a component that only renders when there's a change in props or state, where the change in props or state is det