Considere las siguientes dos implementaciones básicas en React para generar una lista de elementos. Tanto el enfoque mostrará los datos correctos.

El primero causará un renderizado menos ya que todos los datos de los elementos persisten en una referencia.

En el segundo, agregamos el elemento nuevo y devolvemos un nuevo objeto de matriz para que la configuración de los elementos provoque un procesamiento. Procedimiento estándar de establecimiento del estado de reacción.

No se preocupe por el manejo de errores. Suponga que obtener un artículo nuevo siempre funcionará.

¿El primero está mal o tendrá algún efecto secundario que siempre deba ir con el segundo?

Código de referencia :-

 import { useRef } from "react"; export default function App() { const items = useRef([]); const [isLoading, setLoadingState] = useState(false); const loadItems = async () => { setLoadingState(true); const newItem = await simulatePromise(); items.current.push(newItem); setLoadingState(false); }; return ( <div className="App"> <button disabled={isLoading} onClick={loadItems}>Load</button> <ul> {items.current.map((item) => ( <li key={item.id}>{item.title}</li> ))} </ul> {isLoading && <p>Loading....</p>} </div> ); }

Código del estado :-

 import { useState } from "react"; export default function App() { const [items,setItems] = useState([]); const [isLoading, setLoadingState] = useState(false); const loadItems = async () => { setLoadingState(true); const newItem = await simulatePromise(); setItems(prevItems=>[...prevItems,newItem]); setLoadingState(false); }; return ( <div className="App"> <button disabled={isLoading} onClick={loadItems}>Load</button> <ul> {items.map((item) => ( <li>{item.title}</li> ))} </ul> {isLoading && <p>Loading....</p>} </div> ); }