Tengo un problema en el que useState actualiza el estado pero no muestra los cambios hasta que actualizo la aplicación. Primero, declaro una matriz llamada sampleFriends, formada por objetos con campos "nombre", "ubicación" e "imagen" (cada elemento de la matriz se parece a: {nombre: 'Juan', ubicación: 'Boston', imagen: TestImage}).

Entonces, tengo el siguiente useState:

 const [selectedFriends, setSelectedFriends] = useState([])

En algún momento, renderizo con éxito

 sampleFriends.map(({ name, location, image }, index) => ( <NewMsgTableRow name={name} index={index} location={location} image={image} onPress={() => selectFriend(name)} />

))

Y también tengo esta función justo arriba

 const selectFriend = name => { // if the friend is not already selected if (!selectedFriends.find(e => e === name)) { const newFriends = selectedFriends newFriends.push(name) setSelectedFriends(newFriends) } }

El componente NewMsgTableRow tiene un botón que usa onPress

 <TouchableOpacity onPress={onPress} >

Por lo tanto, quiero representar a los Amigos seleccionados tan pronto como se seleccionen (se toca TouchableOpacity y, por lo tanto, el estado se actualiza). Sin embargo, cuando hago clic en el botón, no aparece nada hasta que edito y guardo mi código y se actualiza automáticamente. Tenía entendido que useState volvió a procesar los componentes tan pronto como se actualizó, pero no está sucediendo en este caso y no puedo entender por qué. He estado leyendo que es asíncrono y que no lo cambia instantáneamente, pero no sé cómo hacerlo funcionar. Espero que tenga sentido y gracias por su ayuda!!