5

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>
  );
};
Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44

2 Answers2

8

TL;DR Flatlist, SectionList, VirtualizedList are React.PureComponent the rest components are React.Component.

How to find which component is using PureComponent

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

enter image description here

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

FlatList source

enter image description here

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

SectionList source

enter image description here

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

Text source

enter image description here

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.

Where to use useCallback hook

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

Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44
Waheed Akhtar
  • 3,110
  • 1
  • 16
  • 30
  • I understand what is `PureComponent ` and `useCallback`. How to find out which RN build-in component is pure to use useCallback when it's necessary? – Stanislav Mayorov Jun 16 '20 at 15:26
  • The mentioned components according to docs are using `PureComponent` by-default like `FlatList` etc and other ones are like `Image, Text, etc` are not using `PureComponent` by-default because these list items can re-renders many times but there is a chance with these others components that (Image, Text, etc) they don't have a number of children so they don't requires to be `PureComponent` but if there is a case that your component has number of children and they are re-renders many times then you can do your own implementation. – Waheed Akhtar Jun 16 '20 at 15:35
  • I think the same, but I didn't find any proofs. – Stanislav Mayorov Jun 18 '20 at 15:24
  • It's much better. Thank you. Could you remove parts about what is PureComponent and useCallback please? – Stanislav Mayorov Jun 19 '20 at 10:54
  • It's been removed. – Waheed Akhtar Jun 19 '20 at 13:21
  • Link to the article by kentcdodds is very valuable. – electroid Dec 04 '22 at 12:49
5

  1. How to find out which components are PureComponent which are not?

    If you can not find the answer in the docs you can basically check react native source code. For example:

  2. If all other components aren't pure it isn't necessary to use useCallback?

    It really depends:

    • React.memo is doing similar thing React.PureComponent but it for functional component. That mean if a React Native Component is implemented using React.memo, useCallback is helpful too.
    • If a React Native Component using shouldComponentUpdate to control the re-render and the props you pass from your component is involved in it, you useCallback is helpful too. Check this article out you might find some sample code for undersatanding.
Tony Nguyen
  • 3,298
  • 11
  • 19
  • 2. That's right. I meant all kind of `Pure` (Component, custom shouldComponentUpdate, Memo) – Stanislav Mayorov Jun 19 '20 at 11:48
  • 2. It's a good idea so I checked the source and didn't find a lot of React.memo and shouldComponentUpdate usage. – Stanislav Mayorov Jun 19 '20 at 11:55
  • @StanislavMayorov Yeah. I think for for library which have been started long time ago, `PureComponent` might be the favour of choice. What I am trying to say is `React.memo` and `shouldComponentUpdate` will be affected by not using `useCallback` – Tony Nguyen Jun 19 '20 at 12:45
  • They don't use React.memo and shouldComponentUpdate in RN source, maybe there are only several cases when it's used. – Stanislav Mayorov Jun 19 '20 at 13:32