Tengo una aplicación de contador. Necesito evitar volver a renderizar el componente. Quiero ejecutar Childcompnent solo cuando hago clic en actualizar, pero aquí se ejecuta tanto cuando hago clic en contar como en actualizar.
import { useCallback, useMemo, useState } from "react"; export const App = () => { const [count, setCount] = useState(0); const [updatecount, setUpdateCount] = useState(0); const incCount = () => { setCount(parseInt(count) + 1); }; const updCount = useCallback(() => { return setUpdateCount(parseInt(updatecount) + 1); }, [updatecount]); return ( <> <button onClick={incCount}>count</button> <button onClick={updCount}>update</button> <Childcompnent count={count} /> <p>{updatecount}</p> </> ); }; export default App; export function Childcompnent({ count }) { console.log("pressed"); return <p>{count}</p>; }Envuelva su Childcompnent en React.memo :
const Childcompnent = React.memo(({ count }) => { console.log("pressed"); return <p>{count}</p>; });Aquí está la caja de arena: