I've found in docs that Flatlist, SectionList are PureComponents. There isn't any information about other components (e.g TouchableOpacity).
I want to find out which RN build-in component is pure to use useCallback when it's necessary.
If all other components aren't pure it isn't necessary to use useCallback in this example.
export default App = () => {
const [count, setCount] = useState(0);
const onPress = useCallback(() => setCount(prevCount => prevCount + 1), [prevCount]);
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
};
TL;DR Flatlist, SectionList, VirtualizedList are React.PureComponent the rest components are React.Component.
You can check the source code of react-native components on Github either they are using PureComponent or normal Component.
You see TouchableOpacity of React-Native is extended with Component.
TouchableOpacity source

But on the other hand, you can see FlatList uses PureComponent
FlatList source

Also, you can see SectionList is used to React.PureComponent
SectionList source

Here is the Text component of React-Native which is not using React.PureComponent.
Text source

So the conclusion is by default every component extends with React. Component excluding those components which they have mentioned in the docs that they are using React.PureComponent.
So as you know, the Pure component is used to optimizing rendering of a class component so if you wanted to optimize functional component, then?
you can use React.memo
useCallback is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).
Learn about when to use memo or useCallback read this interesting article.
https://kentcdodds.com/blog/usememo-and-usecallback
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With