Un poco confundido sobre el concepto con los ganchos, tengo un componente donde tengo dos variables de estado definidas con useState:
Ahora, cada vez que cambia una variable, hace que la otra parte de la variable en JSX se vuelva a renderizar, ya que es una lista que quiero evitar que se vuelva a renderizar. ¿Cómo puedo conseguir esto?
Entonces, en el ejemplo a continuación, cada vez que hago clic en el botón, vuelve a mostrar la lista. Cómo puedo detener esto
import "./styles.css"; import { Fragment, useCallback, useEffect, useState } from "react"; const App = () => { const [repos, setRepos] = useState([]); const [count, setCount] = useState(1); useEffect(() => { const fetchRepos = async () => { const response = await fetch("https://api.github.com/repositories"); const repoDetails = await response.json(); console.log(repoDetails); setRepos([...repoDetails]); }; fetchRepos(); }, []); const handleCount = () => { setCount(count + 1); }; return ( <Fragment> <div className="App"> {repos.map((r) => { console.log("render"); return <li key={r.id}>{r.name}</li>; })} </div> <button onClick={handleCount}>Button {count}</button> </Fragment> ); }; export default App;Puede abstraer el componente div que contiene elementos de la list en un componente separado y envolverlo usando React.memo . Pase el estado de repos como accesorio. Para que solo se vuelva a procesar cuando se cambien los repos . En caso de que cambie el count , devolverá la versión memorizada de la lista.
Desacople la etiqueta de la lista en un componente y memorícelo, de modo que cada vez que los accesorios sean los mismos, React simplemente omita la nueva representación en el cambio de estado.
Memoización de reacción: https://dev.to/alexgurr/what-is-function-memoization-and-why-should-you-care-5a1l
Demostración: https://codesandbox.io/s/keen-glade-fmh6q