React - 在侦听器中访问全局范围时不会更新它

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.

Answer 1

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]);