React - The global scope is not updated when accessing it in a listener

Question

I have a db listener that has to access the component properties (which can change over the full component's life). The problem I have is that when I am in the local scope of the listener, the global scope stuff is not updated. For example, imagine that I have a prop "userData" which in a first instance has this form:

{
   name: "anthony"
}

Add changes its field value to "mark" after an unespecified time.

If I run this code:

console.log("Global: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "mark"} OK

const onPostsCollectionUpdate = (snapshot) => {
    /*
      This function gets the initial amount of posts 
      and the new ones that are uploaded in real time.
    */
    console.log("Local: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "anthony"} NOT UPDATED!

    ...
}

 useEffect(() => {
    const { firebase, attachListener } = props;

    // Create a Real-time Database listener
    const postsListener = firebase
      .getDatabase()
      .collection("posts")
      .doc(firebase.getCurrentUser().uid)
      .collection("userPosts")
      .orderBy("date")
      .limitToLast(MAX_POSTS_TO_RETRIEVE_LENGTH)
      .onSnapshot(onPostsCollectionUpdate); // Get the initial amount of posts

    // Attach the listener
    attachListener(postsListener);
  }, []);

I get this result:

Global: { "name": "anthony" }

Local: { "name": "anthony" }

Global: { "name": "mark" }

Local: { "name": "anthony" }

As you can see, inside the method "onPostsCollectionUpdate" the prop is not updated. I have also tried with a state variable and same result.

Any ideas why this happen and how to get the most recent values in the local scope of the listener?

Thank you.

Think that this is related with https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state but using useRef with the prop and updating it in useEffect(() => userDataRef.current = props.userData, [props.userData]) doesn't work :/ — Raul, Sep 29 '20 at 19:24

score 1 · Accepted Answer · edited Sep 30 '20 at 18:53

Try to use this code

import React, { useCallback } from 'react';

console.log("Global: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "mark"} OK

const onPostsCollectionUpdate = (snapshot) => {
    /*
      This function gets the initial amount of posts 
      and the new ones that are uploaded in real time.
    */
    console.log("Local: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "anthony"} NOT UPDATED!

    ...
}

const initializeListener = useCallback(() => {
  const { firebase, attachListener } = props;

  // Create a Real-time Database listener
  const postsListener = firebase
    .getDatabase()
    .collection("posts")
    .doc(firebase.getCurrentUser().uid)
    .collection("userPosts")
    .orderBy("date")
    .limitToLast(MAX_POSTS_TO_RETRIEVE_LENGTH)
    .onSnapshot(onPostsCollectionUpdate); // Get the initial amount of posts

  // Attach the listener
  attachListener(postsListener);
}, [props]);

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

React - The global scope is not updated when accessing it in a listener

1 Answers1