Tengo el siguiente problema: tengo una lista de máquinas y necesito saber si están en uso o son de uso gratuito. Cuando son de uso gratuito, se pueden reservar.

Ahora traté de guardar el estado actual en un useState y con un clic de un botón cambié ese estado a reservado si es gratis.

La cuestión es que, cuando el sitio se carga por primera vez, el estado se establece varias veces para cada máquina, y eso da como resultado demasiadas re-renderizaciones.

useEffect no ayudó, porque en el peor de los casos hay 100 máquinas y todas tienen un estado diferente, por lo que el estado se establece 100 veces.

Este es el código responsable del error (acortado):

 return ( <Card w="80%" ml="10%" mt={buildingProps.marginTop} boxShadow="0"> <CardTitle>{buildingProps.buildingName}</CardTitle> <Table> <TableHead> //TABLE HEADERS </TableHead> <TableBody> {buildingProps.workStations.map((station: Workstation, index: any) => { //variables are declared here in use for the table setstatus(station.status) //Reason for too many re-renders return ( <TableRow key={stationName}> <TableCell className={`stationStatus-${index}`} w="150px" ref={ref}> {checkStation(status)} //Creates a colored statusicon </TableCell> //Workstation information is filled in here </TableCell> <TableCell className="reservationButton"> <Button variantColor="teal" onClick={() => { let isReserved = reserveStation(reservedStation, buildingProps.setReservationInfo); buildingProps.setShow(isReserved); isReserved ? setstatus(statusValue.reserved) : setstatus(statusValue.inUse); }}> Reserve </Button> /**On Button click the function reserveStation checks if the station can be reserved. If it returns true a Box with the information about the reserved station is shown (setShow) and the statusValue is changed to reserved which should result in a new statusicon. If it cannot be reserved the station is blocked at the moment.**/

¿Hay alguna manera de reaccionar para manejar este tipo de situación? Aparte de useEffect, no he encontrado nada útil.

Pensé en darle a la función checkStation un segundo estado, el estado inicial. Pero luego el enum statusValue necesita un cuarto estado, solo para que pueda decirle a checkStation que use useState en lugar de initialState.

Gracias a todos.

¡Tengo que usar reaccionar en modo estricto!