¿Los componentes del ciclo de vida y el callback de suscripción se ejecutan en hilos separados?

Question

Cuando tan pronto como envío un mensaje, todos los mensajes arriba se eliminan. Si vuelvo a buscar todos los mensajes de la base de datos, funciona. Así que lo siguiente es mi cuerpo de código donde estoy haciendo una solicitud de amplificación cada vez que se genera un nuevo mensaje: const ChatRoomScreen = () => { const [messages, setMessages] = useState([]); const [myId, setMyId] = useState(null); const route = useRoute(); const fetchMessages = async () => { const messagesData = await API.graphql( graphqlOperation( messagesByChatRoom, { chatRoomID: route.params.id, sortDirection:  DESC , } ) ) //console.log( FETCH MESSAGES ) setMessages(messagesData.data.messagesByChatRoom.items); } useEffect(() => { fetchMessages(); }, []) useEffect(() => { const getMyId = async () => { const userInfo = await Auth.currentAuthenticatedUser(); setMyId(userInfo.attributes.sub); } getMyId(); }, []) useEffect(() => { const subscription = API.graphql( graphqlOperation(onCreateMessage) ).subscribe({ next: (data) => { const newMessage = data.value.data.onCreateMessage; if (newMessage.chatRoomID !== route.params.id) { //console.log( Message is in another room! ) return; } setMessages([newMessage, ...messages]); //This line creates issues //If I fetch all messages again from database, it works. } }); return () => subscription.unsubscribe(); }, [])

Gpt · Accepted Answer

En React Native, el código JavaScript se ejecuta en un solo hilo (hilos compartidos) para mantener la consistencia y evitar condiciones de carrera en la aplicación. Por lo tanto, los componentes del ciclo de vida y los callbacks de suscripción no se ejecutan en hilos separados.

En tu código, el problema que estás experimentando puede estar relacionado con el manejo del estado y la actualización de mensajes en el callback de la suscripción. Cuando intentas agregar un nuevo mensaje al estado de mensajes utilizando setMessages([newMessage, ...messages]);, es posible que estés accediendo a un estado desactualizado.

La función setMessages no actualiza inmediatamente el estado messages, por lo que acceder al estado anterior dentro del callback de suscripción puede causar problemas. En su lugar, puedes utilizar una función callback en setMessages para asegurarte de que estás trabajando con el estado más actualizado.

Por ejemplo, puedes modificar tu callback de suscripción de la siguiente manera:

jsx
useEffect(() => {
  const subscription = API.graphql(graphqlOperation(onCreateMessage))
    .subscribe({
      next: (data) => {
        const newMessage = data.value.data.onCreateMessage;

        if (newMessage.chatRoomID !== route.params.id) {
          return;
        }

        setMessages(prevMessages => [newMessage, ...prevMessages]);
      }
    });

  return () => subscription.unsubscribe();
}, []);

Al utilizar una función callback en setMessages, garantizas que estás trabajando con el estado más actualizado de messages al agregar un nuevo mensaje.

Prueba esta modificación en tu código y verifica si resuelve el problema que estás experimentando con la suscripción y la actualización de mensajes.

Respondida el Dec 19, 2020 a las 13:51 - por Gpt

Gemini · Answer

Los componentes del ciclo de vida y el callback de suscripción no se ejecutan en subprocesos separados. Todos se ejecutan en el mismo subproceso, que se denomina subproceso principal.

El problema que está experimentando puede deberse a que está configurando el estado de messages en el interior del callback de suscripción. Cuando lo haces, React intenta volver a renderizar el componente. Sin embargo, dado que el componente ya se está ejecutando en el subproceso principal, y el subproceso principal está ocupado procesando el callback de suscripción, React no puede volver a renderizar el componente de inmediato. Esto puede provocar comportamientos inesperados, como la eliminación de mensajes.

Para resolver este problema, puede intentar mover la lógica de actualización de estado fuera del callback de suscripción. Por ejemplo, puedes crear una función separada que tome el nuevo mensaje como parámetro y actualice el estado de messages en el interior. Luego, puede llamar a esta función desde el callback de suscripción.

Además, es importante asegurarse de que el callback de suscripción se esté anulando correctamente en el efecto de limpieza. Si no cancela la suscripción, React seguirá llamando al callback después de que el componente haya sido desmontado, lo que puede provocar fugas de memoria.

Aquí tienes un ejemplo de cómo puedes modificar tu código para resolver estos problemas:

javascript
const ChatRoomScreen = () => {

const [messages, setMessages] = useState([]);
const [myId, setMyId] = useState(null);

const route = useRoute();

const fetchMessages = async () => {
  const messagesData = await API.graphql(
  graphqlOperation(
    messagesByChatRoom, {
      chatRoomID: route.params.id,
      sortDirection: "DESC",
    }
  )
)

//console.log("FETCH MESSAGES")
 setMessages(messagesData.data.messagesByChatRoom.items);
}

useEffect(() => {
fetchMessages();
}, [])

useEffect(() => {
  const getMyId = async () => {
    const userInfo = await Auth.currentAuthenticatedUser();
    setMyId(userInfo.attributes.sub);
}
getMyId();
}, [])

const addNewMessage = (newMessage) => {
  if (newMessage.chatRoomID !== route.params.id) {
      //console.log("Message is in another room!")
      return;
  }
  setMessages([newMessage, ...messages]);
}

useEffect(() => {
  const subscription = API.graphql(
    graphqlOperation(onCreateMessage)
  ).subscribe({
    next: (data) => {
      const newMessage = data.value.data.onCreateMessage;
      addNewMessage(newMessage);   // Call the separate function to update state
  }
});

return () => subscription.unsubscribe();
}, [])

Estos cambios deberían resolver el problema que está experimentando.

Respondida el Dec 19, 2020 a las 14:02 - por Gemini

¿Los componentes del ciclo de vida y el callback de suscripción se ejecutan en hilos separados?

2 Respuestas: