title: How to prevent infinite loop in useEffect using Object from Redux store as dependency?
body: <p>I am relatively new to React, so probably it will be an easy answer for some of you.</p>
  <p>I have bumped into a little problem, I have solved it, but it doesn't seem to be perfect as React Eslint is not happy.</p>
  <p>My web-app is using React-Redux at the front and Node-Express-Mongo at the back. So, I have a functional component (screen/page), and whenever logged in user visits it, it needs to update user data state in Redux store to make sure it matches current data in database.</p>
  <p>However, not registered and not logged in users also can visit that page, then obviously that database check is not needed.</p>
  <p>I get user data as <code>userInfo</code> object from Redux:</p>
  <pre><code>const userLogin = useSelector((state) =&gt; state.userLogin);
  const { loading: loadingUser, error: errorUser, userInfo } = userLogin;
  </code></pre>
  <p>Then, when component renders <code>useEffect()</code> hook shoots, I dispatch an action to get user data from backend (DB) using JWT token.</p>
  <pre><code>useEffect(() =&gt; {
      //update user details in case if access to restricted services changes
      if (userInfo &amp;&amp; userInfo.token) {
        dispatch(refreshUser(userInfo.token));
      }
      // eslint-disable-next-line
    }, []);
  </code></pre>
  <p>As you can see I kept dependency array empty, and disabled it for eslint to keep Mr Eslint happy.</p>
  <p>So far this is the only way I can make it work. If I put <code>userInfo</code> into dependency array - it creates infinite loop, because as we know <code>{}==={}</code> always returns <code>false</code>.</p>
  <p>If I get rid of <code>userInfo</code> from <code>useEffect()</code> and keep just <code>userInfo.token</code>, but then it creates an error <code>userInfo is undefined</code> whenever user is not logged in</p>
  <p>Of course I can populate Redux store with some initial state of empty <code>userInfo</code> or empty <code>userInfo.token</code>, but that seems to be unnecessary hassle. I also tried to put useEffect inside <code>if (userInfo){}</code> statement, but that was just silly, as <code>useEffect()</code> should stay at the top level...</p>
  <p>As it is now, it does what I need it to do - runs just once as the component (page) loads.</p>
  <p>So my question is:
  Is it OK to leave it like that or there must be some elegant solution?</p>