This question occurred to me because as we know from the docs:

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

The docs of useMemo say:

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

I assume that also implies I can't do setState.

Now, if we have this code:

const memoizedValue = useMemo(() => computeExpensiveValue(), []);

Does above quote mean we can't do a side effect inside computeExpensiveValue or the inline function which was the argument to useMemo?

Because if it means we can't do side effect inside computeExpensiveValue it means we can't do a side effect also in a function passed to useCallback because that line is same as:

const memoizedValue = useCallback(computeExpensiveValue, []);

CodePudding user response：

I see how you got there, but it's a slight misreading of the docs. (Fairly easy mistake to make.)

The function that the useMemo docs are talking about isn't your function (fn), it's this function in the useCallback "equivalent useMemo" example:

useMemo(() => fn, deps).
//      ^^^^^^^^

That function doesn't call any state setters, so it's fine.

It's absolutely fine and completely normal to call state setters in callback functions you memoize via useCallack. (As long as you don't call your callback during rendering.) When you do, be sure to either:

• Not use any state variables in when calling the state setter:

  const fn = useCallback(() => {
       setSomething(someValueNotFromState);
  }, []);
  

  or
• Use the callback form of the state setter:

  const fn = useCallback(() => {
       setSomething(something => something   1);
  }, []);
  

  or
• Declare any state members you're going to use in the callback as dependencies:

  const fn = useCallback(() => {
       setSomething(something   1); // I usually avoid this
  }, [something]);
  //  ^^^^^^^^^
  

A more verbose example/comparison:

const [value, setValue] = useState(0);

const changeHandler1 = useCallback((event) => {
    // Absolutely fine to call `setValue` here
    setValue(event.currentTarget.value);
}, []);

// equivalent to:

const changeHandler2 = useMemo(() => {
    // NOT okay to call `setValue` here (the function we pass to `useMemo`)

    return (event) => {
        // Absolutely fine to call `setValue` here
        setValue(event.currentTarget.value);
    };
}, []);