I have following problem: I have a list of machines and need to know if they are in use or free to use. When they are free to use, they can be reserved.

Now I tried to save the current state in a useState and with a click of a button change that state to reserved if it is free.

The thing is, when the site is first loaded, the state is set multiple times for each machine, and that results in too many re-renders.

useEffect did not help, because in a worst-case-scenario there are 100 machines and they all have a different state, so the state is set 100 times.

This is the Code responsible for the error (shortened):

  
    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.**/

Is there a way in react to handle this kind of situation? Apart from useEffect I havent found anything useful.

I thought about giving the checkStation function a second status, the initial status. But then the enum statusValue needs a fourth status, just so I can tell checkStation to actually use the useState instead of initialState.

Thank you everyone.

I have to use react in strict mode!