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