El problema es: cada vez que hago clic en el botón, veo "Botón renderizar" en la consola. Pero quiero ver esta publicación solo una vez. El problema es: cada vez que hago clic en el botón, veo "Botón renderizar" en la consola. Pero quiero ver esta publicación solo una vez.
import React, { useState, useCallback } from "react"; import Button from "./Button"; const UseCallback = () => { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount((prevState) => prevState + 1); }, []); return ( <div> <p>{count}</p> <Button deneme={{ aaa: "aaa", bbb: "bbb" }} handleClick={handleClick} ></Button> </div> ); }; export default UseCallback; import React from "react"; const Button = ({ handleClick }) => { console.log("Button - rerender"); return ( <div> <button onClick={handleClick}>Sayacı artır</button> </div> ); }; export default React.memo(Button);Se supone que debe volver a renderizarse ya que la devolución de llamada está cambiando en el renderizado y está pasando una nueva referencia de objeto en cada botón de renderizado. Ya tiene React.memo pero como tiene una nueva referencia de objeto cada vez que es un botón de volver a renderizar.
Intente envolver el objeto en useMemo para mantener la misma referencia o cree una variable en la parte superior y pásela en deneme prop
const UseCallback = () => { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount((prevState) => prevState + 1); }, []); const deneme = useMemo(() => { return { aaa: "aaa", bbb: "bbb" }; }, []); return ( <div> <p>{count}</p> <Button deneme={deneme} handleClick={handleClick}></Button> </div> ); };o
const deneme = { aaa: "aaa", bbb: "bbb" }; const UseCallback = () => { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount((prevState) => prevState + 1); }, []); return ( <div> <p>{count}</p> <Button handleClick={handleClick}></Button> </div> ); };Entonces, lo único que falta es pasar una función de comparación que le indicará a React.Memo la condición exacta de cuándo volver a procesar el componente. Puedes ver tu código funcionando aquí.https://codesandbox.io/s/romantic-cherry-bv5y0?file=/src/App.js
import "./styles.css"; import React, { useState, useCallback } from "react"; const Button1 = ({ handleClick }) => { console.log("Button - rerender"); return ( <div> <button onClick={handleClick}>Sayacı artır</button> </div> ); }; const compareFunction = (prevProps, nextProps) => { return true; //As props only have a function which we are sure doesn't change. }; const Button = React.memo(Button1, compareFunction); const UseCallback = () => { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount((prevState) => prevState + 1); }, []); return ( <div> <p>{count}</p> <Button deneme={{ aaa: "aaa", bbb: "bbb" }} handleClick={handleClick} ></Button> </div> ); }; export default UseCallback;