Bind event handler to document & have access to firebase api data via useEffect

Question

Quick version:

My ultimate goal is to do something like the link below but with an async call to firebase per useEffect where the list data is composed of firebase object content.

https://codesandbox.io/s/usage-pxfy7

Problem

In the code below useEffect encapsulates code that pings firebase and gets some data back called "clients". The data is retrieved perfectly.

I then store that data using useState to two different instances of useState. The data is stored at clientList and clientListForRender.

So far so good.

Now the problem starts.

I have a third instance of useState that takes a number. I want to set a keypress event to the document so that I can use the up/down arrows to toggle the counter and access each value of the clientListForRender array.

When I set the eventListener I do not have access to the array (presumably due to the async calls not being in an order that allows for it).

I am not sure how to write my hooks in a way that gives me the result I want.

Thank you.

const clientsRef = firebase.database().ref('clients');
const [clientList,setClientListState] = useState([]);   
const [clientListForRender,setClientListStateForRender] = useState([]);
const [selectedIndex, updateSelectedIndex] = useState(0);



useEffect(() => {



  function handleKeyPress(event,arr){
    console.log(arr)
    if(event.key === "ArrowDown"){
      updateSelectedIndex((prev)=>{
          return prev += 1
      });
    }
  }



  clientsRef.on('child_added', snapshot => {
      const client = snapshot.val();
      client.key = snapshot.key;     //     __________________________1. get firebase data


     setClientListState(function(prev){       




           setClientListStateForRender(()=>[client,...prev]); //_______2 store data    



     // document.addEventListener('keydown', handleKeyPress);  <---I am not sure where to put this. I have experimented and 
                                                                   // I decided to omit my cluttered "experiments" to protect your eyes


           return[client,...prev]
      });

   });


},[]);

Answer 1

Ok there are few issues with the code you posted:

1) You should definitely not add your keyboard listener in the child_ added listener ( this means that every time the child_added listener is called, you are going to create a new listener, leading to unexpected results and memory leak)

2) You are calling setState in a setState updater function (the callback function you provided for, setClientListState), which is an anti pattern and makes your code hard to follow and understand, and will cause unexpected effects once the component grows. If you want to update a state based on a previous state then use the useEffect callback

3) the useEffect function takes a second parameter, called array of dependencies. When you have provided it with an empty array, it means that you want your effect to run only once, which is problematic because we see that the function depends on clientsRef variable. ( from this actually comes your problem because the keyboard listener was having the old value of your clientsList which is the empty array, and so it was always returning 0, when keys where pressed, i explained more in the code sandbox)

4)You should return a callback function from the useEffect function to clean the effects you created, turning off the listeners you attached (or else you might have memory leaks depending on how much the component gets mounted/unmounted)

ok here is how the code should be to work:

const clientsRef = firebase.database().ref('clients');
const [clientList, setClientListState] = useState([]);
// I don't understand why you wanted another list, so for now i only use on list
// const [clientListForRender,setClientListStateForRender] = useState([]);
const [selectedIndex, updateSelectedIndex] = useState(0);

useEffect(() => {
  function handleKeyPress(event, arr) {
    if (event.key === 'ArrowDown') {
      updateSelectedIndex(prev => {
        if (prev >= clientList.length - 1) {
          return (prev = 0);
        } else {
          return prev + 1;
        }
      });
    }
  }

  clientsRef.on('child_added', snapshot => {
    const client = snapshot.val();
    client.key = snapshot.key; //     __________________________1. get firebase data

    setClientListState(function(prev) {
      return [client, ...prev];
    });
  });

  document.addEventListener('keydown', handleKeyPress);

  // here you should return a callback to clear/clean your effects

  return () => {
    document.removeEventListener('keydown', handleKeyPress);
    clientsRef.off();
  };
  // Its important to add these here, or else each time your keyboard listener runs it will have the initial value of
  // clientsList ([]), and so clientsList.length = 0, and so you will always updateSelectedIndex(0)
}, [clientList, clientsRef]);

//here render based on selected list as you wish

Finally i have set up a working codesandbox that emulated data fetching based on the example you give https://codesandbox.io/s/usage-4sn92, i added some comments there to help explain what i said above.