title: Data is not rendered when changing pages with react router
body: <p>I am using the <code>Link</code> component from <code>React-Router</code> to change pages, on the <code>Play.tsx</code> I have data that I am getting using <code>useEffect</code> from <code>Firestore</code> and that data is rendered on page using <code>map</code> function if the array length is more than 1. It works fine until I change the page and go back to <code>/play</code> where Play.tsx is rendered and there is no data at all, the data from firestore is ok but nothing is rendered on the page.</p>
  <p>If I am using a normal <code>a</code> tag instead of <code>Link</code> will work fine.</p>
  <p><b>Play.tsx</b></p>
  <pre><code>const [users, setUsers] = useState&lt;any&gt;([]);
  
  // code...
  
  useEffect(() =&gt; {
    db.collection(&quot;users&quot;).orderBy(&quot;points&quot;, &quot;desc&quot;).limit(10).get().then((data: any) =&gt; {
       data.forEach((usr: any) =&gt; {
           users.push(usr.data());
           console.log(users)
       })
     }).catch((err) =&gt; {
           console.log(&quot;An error has occured: &quot;, err.message)
     })
  }, [])
  
  return (
     &lt;&gt;
  {
  
    users.length &gt;= 1 ?
       users.map((d: any) =&gt; {
         return (
            &lt;div className=&quot;userWrapper&quot; key={Math.random() * 9999999999999999999}&gt;
               &lt;Link to={`/user/${d.username}`}&gt;&lt;img className=&quot;lbImage&quot; src={d.profileImage} /&gt;&lt;/Link&gt;
               &lt;Link to={`/user/${d.username}`}&gt;
                   &lt;p className=&quot;lbUser&quot;&gt;{d.username} {d.pro ? &lt;img src={Pro} className=&quot;lbPro&quot; /&gt; : null} 
                   &lt;/p&gt;
                &lt;/Link&gt;
                &lt;p className=&quot;lbPoints&quot;&gt;{d.points} Points, {d.rank} ({d.races} Tests)&lt;/p&gt;
            &lt;/div&gt;
         )
       })
  
       : &lt;div className=&quot;lbSpinner&quot;&gt;&lt;/div&gt;
  
  }
     &lt;/&gt;
  )
  </code></pre>
  <p><b>OtherComponent.tsx</b></p>
  <pre><code>  &lt;Link to=&quot;/play&quot;&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/Link&gt;
  </code></pre>
  <p><strong>My route: Play.tsx (data rendered) -&gt; OtherComponent.tsx -&gt; Play.tsx (Data is not rendered)</strong></p>
  <p>Note: The problem is not at the data itself because I can console.log it, the problem is at the DOM, is like the map function on <code>users</code> is not calling.</p>
  <p>Note2: I have a condition there, if I have more than 1 user on the array it will map, if not it will show a spinner, but none of these is rendered when I come back to <code>Play.tsx</code>, and no error is consoled.</p>