我可以在传递给 useCallback 的函数内部设置状态吗？

Question

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, []);

Answer 1

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);
    };
}, []);