Recently, after learning React-Native, I found that FlatList and SectionList have a common feature in official documents. They are all pure components, which means that if their props are equal in shallow comparison, they will not be re-rendered. So check the props data that your renderItem function depends on (including the data property and the state of any parent component it might use). If it is a reference type (Object or array are reference types), You need to change the reference address (for example, copy it to a new Object or array) and then change its value, otherwise the interface probably won’t refresh.
Pure components (React.PureComponent)
The difference between a pure component and a normal component is shouldComponentUpdate() or not. This function is implemented in the React.PureComponent in a shallow comparison between prop and state.
Shallow comparison
A deep exploration of the shallow comparison of source code implementation. Shallow comparison mainly checks whether the two values are equal. In pure components, it checks whether the props and state of the previous one are the same as that of the later one. The core function for comparison is to use the object.is() method.
The object.is () method determines whether two values are the same. The two values are equal if the following conditions are met:
- Is undefined
- Is null
- Either true or false
- Are strings of the same length and the same characters are arranged in the same order
- Are the same objects (meaning each object has the same reference)
- It’s all numbers and
- Are + 0
- Is 0
- Is NaN
- Or are both non-zero and non-nan and have the same value
It’s different from the == operation. The == operator casts the variables on both sides (if they are not of the same type) before determining equality (this behavior results in “” == false being true), while object. is does not cast the values on both sides.
It’s not the same as the === operation. The === operator (including the == operator) treats the numbers -0 and +0 as equal, and number.nan as unequal to NaN.
And in shouldComponentUpdate () it’s not officially recommended to do deep comparisons or use json.stringify (). This is very inefficient and can hurt performance.
Pay attention to parameter types whenever there is a shallow comparison, or if it is a reference type.
Performance optimization
React has a number of performance optimized apis, such as
React.memo is a higher-level component.
By default, only shallow comparisons are performed on complex objects. If you want to control the comparison process, pass in your custom comparison function as a second argument. There is a shallow comparison, so be careful if the parameter passed is of reference type.
useMemo
You pass in the create function and the dependency array as arguments to useMemo, which recalculates memoized values only when a dependency changes. This optimization helps avoid costly calculations every time you render. The comparison of the second parameter here is also shallow, so pay attention to the type of parameter.
useCallback
Passing the inline callback function and the array of dependencies as arguments to useCallback returns the Memoized version of the callback function, which is updated only when a dependency changes. This is useful when you pass callback data to child components that are optimized and use reference equality to avoid unnecessary rendering (such as shouldComponentUpdate). The comparison of the second parameter here is also shallow, so pay attention to the type of parameter.
All of these performance optimizations follow the logic of shallow comparisons, paying special attention to their parameter formats