useCallback vs useEffect in React

Question

What's the different between useEffect when you pass it dependencies as the second parameter and useCallback?

Don't both essentially run the function/code passed as the first parameter whenever the dependencies passed as the second parameter change?

From what I've read the two hooks are intended to serve different purposes, but my question is whether they in actuality could be used interchangeably because they functionally do the same thing

Answer 1

No, They are not same.

useEffect - is used to run side effects in the component when something changes. useEffect does not return you anything. It just runs a piece of code in the component.

useCallback - Whereas useCallback returns a function, it does not execute the code actually. It is important to understand that functions are objects in Javascript. If you don't use useCallback, the function you define inside the component is re-created whenever the component rebuilds.

Example

Consider this example, this component will go in a infinite loop. Think Why?

const TestComponent = props => {
  const testFunction = () => {
    // does something.
  };

  useEffect(() => {
    testFunction();
    // The effect calls testFunction, hence it should declare it as a dependency
    // Otherwise, if something about testFunction changes (e.g. the data it uses), the effect would run the outdated version of testFunction
  }, [testFunction]);
};

Because on each render the testFunction would be re-created and we already know that useEffect will run the code when ever the testFunction changes. And since testFunction changes on each render, the useEffect will keep on running, and hence an infinite loop.

To fix this, we have to tell react, hey please don't re-create the testFunction on each render, create it only on first render (or when something changes on which it depends).

const TestComponent = props => {
  const testFunction = useCallback(() => {
    // does something.
  }, []);

  useEffect(() => {
    testFunction();
    // The effect calls testFunction, hence it should declare it as a dependency
    // Otherwise, if something about testFunction changes (e.g. the data it uses), the effect would run the outdated version of testFunction
  }, [testFunction]);
};

This won't be a infinite loop, since instance of testFunction will change only on first render and hence useEffect will run only once.

Answer 2

They're too different.

useEffect will run the function inside when the dependency array changes.

useCallback will create a new function when the dependency array changes.

You can't switch useEffect with useCallback alone because you also need the logic to run the newly created function. (I suppose you could implement this if you used a ref as well, but that'd be quite strange.)

You can't switch useCallback with useEffect because you very often don't want to run the newly created function immediately - rather, you usually want to pass it as a prop to some other component.

useCallback primarily exists for optimization purposes, to reduce re-renders of a child component.