I have gone through a couple of articles on useCallback
and useMemo
on when to use and when not to use but I have mostly seen very contrived
code. I was looking at a code at my company where I have noticed someone have done this:
const takePhoto = useCallback(() => {
launchCamera({ mediaType: "photo", cameraType: "front" }, onPickImage);
}, []);
const pickPhotoFromLibrary = async () => {
launchImageLibrary({ mediaType: "photo" }, onPickImage);
}
const onUploadPress = useCallback(() => {
Alert.alert(
"Upload Photo",
"From where would you like to take your photo?",
[
{ text: "Camera", onPress: () => takePhoto() },
{ text: "Library", onPress: () => pickPhotoFromLibrary() },
]
);
}, [pickPhotoFromLibrary, takePhoto]);
This is how onUploadPress is called:
<TouchableOpacity
style={styles.retakeButton}
onPress={onUploadPress}
>
Do you think this is the correct way of calling it? Based on my understanding from those articles, this looks in-correct. Can someone tell me when to use useCallback
and also maybe explain useCallback in more human terms?
Article I read: https://kentcdodds.com/blog/usememo-and-usecallback.
useCallback
returns a normal JavaScript function, regarding how to use it. It is the same function as the one it gets as first parameter regarding what it does. Though the returned function is memoized. Which means when your component re-renders, React will not recreate that function (which is the behaviour for a normal function inside a component).
React will recreate a new version of that function if one of the variables inside the array (the second parameter of useCallback
) changes. It's worth it if you have that function in the dependencies array of an useEffect
for example. It's also worth it if you pass it down to a component that is memoized with React.memo
.
The callback of an
useEffect
gets called on the first render and every time one of the variables inside the dependencies array changes. And since normally a new version of that function is created every time the component re-renders, the callback might gets called infinitely. That is whyuseCallback
is used to memoize that function.
A memoized component will re-render only if its
state
orprops
changes, not because its parent re-renders. And because normally a new version of that passed function is created when the parent re-renders, the child component gets a new reference of that function, so it re-renders. That is whyuseCallback
is used to memoize the passed function.
Memoizing is not free. Bad memoizing is worse than no memoizing at all. Here is the most complete and shortest ressource I have ever seen for understanding in depth, the React render process to know when to memoize and when not to: React Render Tutorial.
In your case, using useCallback
for onUploadPress
is waste of performance, beacause pickPhotoFromLibrary
, an unmemoized function is in the dependency array. It is a waste of performance also because TouchableOpacity
is not memoized with React.memo
.