En el siguiente código:
import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import React, { useState, useEffect, useMemo, useRef, useCallback } from "react"; const App = () => { const [channel, setChannel] = useState(null); const handleClick1 = useCallback(() => { console.log(channel); }, [channel]); const handleClick2 = () => { console.log(channel); }; const parentClick = () => { console.log("parent is call"); setChannel((prev) => prev + 1); }; // useEffect(() => { // setChannel(1); // }); return ( <div className="App"> <button onClick={parentClick}>parent click</button> <br /> <br /> <button onClick={handleClick1}>child click1</button> <button onClick={handleClick2}>child click2</button> </div> ); }; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render(<App />); Hay un ajuste de clic secundario con devolución de llamada ( handleclick1 ) y otro no ( handleclick2 ). Después de hacer clic en el padre, ambos hijos obtienen el valor de estado del channel correcto. Mi pregunta es para handleclick2 :
channel desencadenará la reevaluación de la función y, por lo tanto, la nueva representación de toda la interfaz de usuario?channel ?vercódigos y caja aquí
¿El cambio del valor del estado del canal desencadenará la reevaluación de la función y, por lo tanto, la nueva representación de toda la interfaz de usuario?
Sí, pero esto no se debe a nada en handleClick2 , se debe a que se llama al establecedor de estado. Siempre que se llame a un setter de estado, el componente se volverá a representar, lo que significa, en este caso, que la función de la App se ejecuta de nuevo.
useCallback suele ser útil cuando se pasa una función a otro componente de React como accesorio, para reducir la necesidad de ese componente de volver a calcular las cosas. No es útil en situaciones como estas donde todo se hace en un solo componente.