import AccordionSummary from '@mui/material/AccordionSummary'; import DirectionsBusIcon from '@mui/icons-material/DirectionsBus'; import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk'; import { Box } from "@mui/material"; import { useRef } from 'react'; const RouteSummary = (props) => { const expanded = useRef(0) const handleClick = ()=>{ expanded.current++ props.onClick() } console.log("testing",expanded) return( <AccordionSummary expanded ={expanded} onClick = {handleClick} key={Math.random()} aria-controls="panel1a-content" sx={{width:"100%",display:"flex",paddingLeft:"2rem"}} >{props.routeObj.map((stepObj) =>{ return <Box key={Math.random()} sx={{display:"flex"}}> {stepObj.mode==="WALKING"?<DirectionsWalkIcon/>:<DirectionsBusIcon/>} {stepObj.busNumber? <Box sx={{backgroundColor:"#FBCB0A",marginRight:"0.5rem",borderRadius:"5px",padding:"0.2rem"}}> {stepObj.busNumber} </Box>:null} </Box>}).reduce((prev, curr) => [prev, ' > ', curr])} </AccordionSummary> ) } export default RouteSummary;El valor de los cambios expandidos vuelve a cero después de una nueva representación que no puedo entender. Sé que useRef debería persistir en los renderizados, por lo que no entiendo este comportamiento.
Tu problema era este:
key={Math.random()} probablemente hayas usado esto también en los componentes principales. Cuando el algoritmo de reconciliación reacciona encuentra una clave diferente en el siguiente renderizado para el mismo componente en el mismo lugar en la jerarquía de componentes, desmontará el componente y montará uno nuevo ; es por eso que el valor de useRef s también se perdió.
Es por eso que usar Math.random() como clave suele ser una mala idea.