如何在 React 中使用回调？

Question

I am curious about the difference between useEffect and useCallback .

const onUpdate = useCallback(() => {
  firebase
    .firestore()
    .collection('answer')
    .where('questionUid', '==', questionUid)
    .get()
    .then((snap) => {
      const answer = snap.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setAnswers(answer);
    });
}, [answers]);

Answer 1

They are two complete different things: the aim of useEffect() is to run side effects after the component has rendered, while useCallback() aim is to memoize a callback function so that it is not re-instantiated every time the component re-renders.

useEffect() can trigger a component re-render and somehow change what the user sees in the interface, either in terms of layout (eg resizing an image in response to a viewport change) or in terms of content (eg retrieving data from an external resource) while useCallback() is a performance optimization with no evident effect for the user (well, actually in some cases forgetting to use useCallback() might lead to an infinite re-render loop but that is a different topic).