tengo dos componentes Componente padre: Tablero y componente hijo Celda. Estoy renderizando 9 Celdas usando un bucle en el componente Tablero.
Este es el componente secundario (Cell.js):
function Cell(props) { return <button style={style} className='cells' id={props.id} onClick={(e) => { props.handleclick(e) }}>{props.text}</button>; }Este es el componente principal (Board.js):
function Board() { let [board, setBoard] = useState(['', '', '', '', '', '', '', '', '']); const handleClick = (e) => { let newBoard = [...board]; newBoard[2] = "0"; setBoard(newBoard); } return <div style={style}> {board.map((item, i) => { return <><Cell handleclick={handleClick} text={item} key={i} /></> }) } </div> }Esto funciona perfectamente, pero hay otro método que probé donde hice algunos cambios en el método handleClick.
const handleClick = (e) => { let newBoard = board; newBoard[2] = "0"; setBoard(newBoard); }Esto toma demasiado tiempo para cambiar el estado. El estado está cambiando y lo he confirmado al observar los componentes de reacción en las herramientas de React Dev. ¿Qué no puedo entender por qué este método tarda demasiado en actualizar el estado?
let newBoard = board; newBoard[2] = "0"; setBoard(newBoard); Estás mutando el estado. Cuando establece el estado en un componente de función, reacciona hace un === entre el estado antiguo y el nuevo. Dado que es la misma matriz, reacciona piensa que nada ha cambiado, por lo que el componente no se vuelve a representar. Es posible que nunca se renderice, aunque en su caso parece que algún otro componente finalmente establece el estado y provoca una nueva renderización.
En su lugar, siempre crea un nuevo estado:
let newBoard = [...board]; newBoard[2] = "0"; setBoard(newBoard);