使用对象作为参数的无限循环 useEffect [React_Native]

Question

  const [ state, setState] = useState({
casas: [],
casaSelecionada: '',
 });




  useEffect(()=>{
    dbref.once('value', function(snapshot, prevChildKey){
      setState({
        casas:(Object.entries(snapshot.val())).map( e => e[1].casaItem),
      });
    });
   dbref.off('value'); // according to the firebase website itself,  
                       //this function serves to remove all callbacks 
                      // from one location.
  },[]);

I started using the hooks, and I came across an infinite loop problem when trying to set my state, I already looked in several forums and all possible solutions did not solve my problem. I happen to be trying to set an array of objects, and when I send update, it says that it does not recognize "state.casas" as an object, but when I pass "state.casas" as the second parameter in useEffect inside "[]", it still in the loop. Can anybody help me?

Answer 1

You are getting an infinite loop because state.casas is endlessly being updated. Each time the handler for the firebase on triggers which updates state.casas , it causes the hook to execute. In addition to that, every time the hook executes, it creates new firebase subscriptions that run in addition to the other existing subscriptions with each updating casas constantly causing more executions of the hook. Your useEffect should probably only ever be run once as the single firebase subscription is at most what you'd need for that ref to get realtime updates. Also moving the handler to a function will make it easier to cleanup the subscription for when the component unmounts:

const [state, setState] = useState({
  casas: [],
  casaSelecionada: '',
});

useEffect(() => {
  // Move logic to a shared handler for easier `on`/`off`
  function handleValueChange(snapshot, prevChildKey) {
    setState(prevState => {
      return {
        ...prevState,
        casas: (Object.entries(snapshot.val())).map( e => e[1].casaItem),
      };    
    });
  }

  dbref.on('value', handleValueChange);

  // Return a function that you can unsubscribe from firebase to avoid leaks
  return () => {
    dbref.off('value', handleValueChange);
  }
}, []);

Notice a cleanup function was return at the end of the hook containing the off . This is to remove the subscription when the component unmounts. Otherwise you could have leaks. Notice that is a returned function. In your example you are simply calling off rather than returning a function which is what theguide on hooks indicates. If you decide to use once , then you probably don't need a cleanup function, but once may not be enough if you need constant realtime updates.

Hopefully that helps!