Question

0

118

Views

When to use useCallback?

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.

about 3 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-04-06T00:46:12.645Z

1. Overview

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 why useCallback is used to memoize that function.

A memoized component will re-render only if its state or props 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 why useCallback is used to memoize the passed function.

2. Important note

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.

3. Your use case

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.

0

118