0
261
VistasEl componente secundario se vuelve a representar a pesar de usar useMemo,
Tengo un código como este:
export default function App() { const [items, setItems] = useState([]); const handleClick = (number) => { console.log("typeof", typeof number); items.includes(number) ? setItems((prevState) => prevState.filter((prevSlot) => prevSlot != number) ) : setItems((items) => [...items, number]); }; useEffect(() => { console.log("items", items); }, [items]); return ( <div className="App"> <ButtonDiv handleClick={handleClick} slot="5" /> <ButtonDiv handleClick={handleClick} slot="10" /> <ButtonDiv handleClick={handleClick} slot="15" /> <ButtonDiv handleClick={handleClick} slot="20" /> <ButtonDiv handleClick={handleClick} slot="25" /> </div> ); }BotónDiv
const ButtonDiv = ({ handleClick, slot }) => { return useMemo(() => { console.log("renderButton"); return <button onClick={() => handleClick(slot)}>Click me</button>; }, [handleClick, slot]); };Aquí, al hacer clic en el botón div, se vuelve a representar para cada componente del botón, ¿cómo podría evitar que suceda y seguir manteniendo la funcionalidad principal de alternar el valor cuando se hace clic en el botón?
2 Respuestas
Responde la pregunta0
Cada vez que la App se procesa, genera una nueva función handleClick y la pasa como accesorio a <ButtonDiv> .
El useMemo enumera handleClick en las dependencias.
Dado que handleClick ha cambiado, se debe llamar a la función memorizada para regenerar el resultado.
Probablemente desee envolver la creación de handleClick en useCallback .
0
Está enviando una nueva referencia de handleClick cada vez que está renderizando la aplicación .
Con algunas modificaciones y usando useCallback , puede hacer que funcione sin volver a renderizar los divButtons, useCallback sin deps generará siempre la misma instancia, por lo que no actualizará sus botones.
Tuve que eliminar el estado de los elementos, ya que si lo agrega, siempre tendrá la instancia del estado en el momento en que se crea el handleClick, por lo que usando solo el estado establecido y el prevState podemos lograr que funcione.
const handleClick = useCallback( (number) => { console.log("typeof", typeof number, number); setItems((prevState) => prevState.includes(number) ? prevState.filter((prevSlot) => prevSlot != number) : [...prevState, number] ) }, [] );Agregar imagen de ejemplo de trabajo.
