solución: cambié el gancho a:

 const [flagC, setFlagC] = useState(props.cars[i].state===on? 'green' : 'red');

y la función de:

 const onOff=()=>{debugger; if(props.cars[i].state===on){ setFlagC('red'); props.cars[i].state=off; } else if(props.cars[i].state===off){ setFlagC('green'); props.cars[i].state=on; } }

tengo una matriz en mi app.js que contiene autos y cada auto tiene un estado activado/desactivado:

let cars=[{name: 'mazda', state: off},{name:'toyota', state:off},{name: 'volvo', state:off}];

ahora tengo un componente que recibe esta matriz y muestra cada automóvil en un botón diferente (usando el mapa en app.js):

 {cars.map((val,i)=>{ return <ComponentName carName={val.name} index={i}/> })}

Creé dentro del componente un gancho que tiene color rojo: const[flagC,setFlagC]=useState('red');

y una función que se supone que verifica cuál es el estado del automóvil y si está apagado, establece el color de fondo del botón rojo y si está encendido, establece el estado como "encendido". cambia el color del automóvil, pero cuando paso a otra página en la aplicación, lo vuelve a configurar en rojo pero el estado permanece encendido. que necesito cambiar?

aquí está la función:

 const[flagC,setFlagC]=useState('red'); const onOff=()=>{debugger; if(props.cars[i].state===on){ props.cars[i].state=off; setFlagC('red'); } if(props.cars[i].state===off){ props.cars[i].state=on; setFlagC('green'); } }

el valor obtiene el auto correcto por índice y el gancho es el estilo del botón + el botón tiene onClick.

 <button style={{backgroundColor: flagC}} onClick={onOff}>{props.carName}</button>