title: Map data using useRef Hook
body: <p>I am following this: <a href="https://stackoverflow.com/questions/62403409/merge-two-json-data-into-one-with-particular-key-values">Merge two JSON data into one with particular key values</a></p>
  
  <p>Now, I added an <code>useEffect()</code> hook. How can I make use of useRef to store my result? This is an asynchronous function.</p>
  
  <pre><code>const App = (props) =&gt;{
      let result = useRef ()
      useEffect(()=&gt;{
        return()=&gt;
          (result.current = [courtdata, balldata].reduce((p, q) =&gt; p.map((c, i) =&gt; Object.assign({}, 
          {[c.court_id] : q[i].color}))))
        }.[someTrigger])
     return(
          &lt;ul&gt;
             {result.current.map(r =&gt; (
             &lt;li&gt;
               Court id - {r.court_id} | Ball colour - {r.color}
             &lt;/li&gt;
        ))}
      &lt;/ul&gt;
  )
  }
  </code></pre>
  
  <p>Now my {r.court_id} and {r.color} are empty.</p>
  
  <p>Things I have tried:</p>
  
  <pre><code>const App = (props) =&gt;{
         [result, setResult] = useState({})
          useEffect(()=&gt;{
            setResult([courtdata, balldata].reduce((p, q) =&gt; p.map((c, i) =&gt; Object.assign({}, 
              {[c.court_id] : q[i].color}))))
            }))
         return(
              &lt;ul&gt;
                 {result.map(r =&gt; (
                 &lt;li&gt;
                   Court id - {r.court_id} | Ball colour - {r.color}
                 &lt;/li&gt;
            ))}
          &lt;/ul&gt;
  )
  }
  </code></pre>
  
  <p>error:
  <code>TypeError: result.map is not a function</code></p>