Esta pregunta se me ocurrió porque, como sabemos por los documentos:
useCallback(fn, deps) es equivalente a useMemo(() => fn, deps).
Los documentos de useMemo dicen:
Recuerda que la función pasada a useMemo se ejecuta durante el renderizado. No hagas nada allí que normalmente no harías durante el renderizado . Por ejemplo, los efectos secundarios pertenecen a useEffect, no a useMemo.
Supongo que eso también implica que no puedo hacer setState .
Ahora, si tenemos este código:
const memoizedValue = useMemo(() => computeExpensiveValue(), []); ¿La cita anterior significa que no podemos hacer un efecto secundario dentro computeExpensiveValue o la función en línea que fue el argumento para useMemo ?
Porque si significa que no podemos hacer un efecto secundario dentro computeExpensiveValue , significa que no podemos hacer un efecto secundario también en una función pasada a useCallback porque esa línea es la misma que:
const memoizedValue = useCallback(computeExpensiveValue, []);Veo cómo llegaste allí, pero es un ligero error de lectura de los documentos. (Error bastante fácil de cometer).
La función de la que hablan los documentos de useMemo no es su función ( fn ), es esta función en el useCallback " useMemo equivalente":
useMemo(() => fn, deps). // ^^^^^^^^Esa función no llama a ningún establecedor de estado, por lo que está bien.
Está absolutamente bien y es completamente normal llamar a los establecedores de estado en las funciones de devolución de llamada que memoriza a través useCallack . (Siempre que no llame a su devolución de llamada durante el procesamiento). Cuando lo haga, asegúrese de:
const fn = useCallback(() => { setSomething(someValueNotFromState); }, []); o const fn = useCallback(() => { setSomething(something => something + 1); }, []); o const fn = useCallback(() => { setSomething(something + 1); // I usually avoid this }, [something]); // ^^^^^^^^^Un ejemplo/comparación más detallado:
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); }; }, []);