Recientemente estoy practicando mi habilidad de reacción y tratando de construir un componente fácil, y caigo en una situación confusa.

Aquí está el código, me pregunto por qué mi página de reacción no muestra los datos después de que los desactivé (debería mostrar la opción Seleccionar todo), investigo un poco al respecto y sé que el problema es el cierre ( el método useState set no refleja el cambio inmediatamente ), pero sigo siendo confuso si es el caso, cuando se va a useEffect, su cierre son los datos originales y los anulo, luego setState debería actualizar los datos después.

Sé que puedo solucionarlo creando una variable temporal en useEffect y setState con ella, pero todavía me pregunto cómo funciona y qué sucede detrás de escena.

 import React, { useState, useEffect } from "react"; const selections = ["Kosher", "No Celery(inc celeriac)", "No Egg"]; const dataConfig = selections.map((selection) => ({ value: selection, isSelect: false })); const Selector = () => { const [data, setData] = useState(dataConfig); useEffect(() => { data.unshift({ value: "Select All", isSelect: false }); setData(data); }, []); return ( <div className="container"> {console.log(data)} {data.map((ele, idx) => { return ( <div key={Math.random()}> <input type="checkbox" value={ele.value} /> <label>{ele.value}</label> </div> ); })} </div> ); }; export default Selector;