title: React useRef hook causing "Cannot read property '0' of undefined" error
body: <p>I'm trying to create a reference using the <code>useRef</code> hook for each items within an array of `data by doing the following:</p>
  
  <pre><code>const markerRef = useRef(data.posts.map(React.createRef))
  </code></pre>
  
  <p>Now, <code>data</code> is fetched externally through GraphQL and it takes time to arrive, therefore, during the mounting phase, <code>data</code> is <code>undefined</code>.  This causes the following error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property '0' of undefined</p>
  </blockquote>
  
  <p>I've tried the following with no success:</p>
  
  <pre><code>const markerRef = useRef(data &amp;&amp; data.posts.map(React.createRef))
  </code></pre>
  
  <p>How do I set up so that I can map through the <code>data</code> without causing the error?</p>
  
  <pre><code>    useEffect(() =&gt; {
          handleSubmit(navigation.getParam('searchTerm', 'default value'))
      }, [])
  
      const [loadItems, { called, loading, error, data }] = useLazyQuery(GET_ITEMS)
      const markerRef = useRef(data &amp;&amp; data.posts.map(React.createRef))
  
      const onRegionChangeComplete = newRegion =&gt; {
          setRegion(newRegion)
      }
  
      const handleSubmit = () =&gt; {
          loadItems({
              variables: {
                  query: search
              }
          })
      }
  
      const handleShowCallout = index =&gt; {
         //handle logic
      }
  
      if (called &amp;&amp; loading) {
          return (
              &lt;View style={[styles.container, styles.horizontal]}&gt;
                  &lt;ActivityIndicator size="large" color="#0000ff" /&gt;
              &lt;/View&gt;
          )
      }   
  
      if (error) return &lt;Text&gt;Error...&lt;/Text&gt; 
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;MapView 
                  style={{ flex: 1 }} 
                  region={region}
                  onRegionChangeComplete={onRegionChangeComplete}
              &gt;
                  {data &amp;&amp; data.posts.map((marker, index) =&gt; (
  
                          &lt;Marker
                              ref={markerRef.current[index]}
                              key={marker.id}
                              coordinate={{latitude: marker.latitude, longitude: marker.longitude }}
                              // title={marker.title}
                              // description={JSON.stringify(marker.price)}
                          &gt;
                              &lt;Callout onPress={() =&gt; handleShowCallout(index)}&gt;
                                  &lt;Text&gt;{marker.title}&lt;/Text&gt;
                                  &lt;Text&gt;{JSON.stringify(marker.price)}&lt;/Text&gt;
                              &lt;/Callout&gt;
                          &lt;/Marker&gt;
  
                  ))}
              &lt;/MapView&gt;
          &lt;/View&gt;
      )
  </code></pre>
  
  <p>I'm using the <code>useLazyQuery</code> because I need to trigger it at different times.</p>
  
  <p>Update:</p>
  
  <p>I have modified the <code>useRef</code> to the following on the advise of @azundo:</p>
  
  <pre><code>const dataRef = useRef(data);
  const markerRef = useRef([]);
  if (data &amp;&amp; data !== dataRef.current) {
      markerRef.current = data.posts.map(React.createRef);
      dataRef.current = data
  }
  </code></pre>
  
  <p>When I console.log <code>markerRef.current</code>, I get the following result:
  <a href="https://i.stack.imgur.com/I1SE6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I1SE6.png" alt="enter image description here"></a></p>
  
  <p>which is perfectly fine. However, when I attempt to map each <code>current</code> and invoke <code>showCallout()</code> to open all the callouts for each marker by doing the following:</p>
  
  <pre><code>markerRef.current.map(ref =&gt; ref.current &amp;&amp; ref.current.showCallout())
  </code></pre>
  
  <p>nothing gets executed.</p>
  
  <pre><code>console.log(markerRef.current.map(ref =&gt; ref.current &amp;&amp; ref.current.showCallout()))
  </code></pre>
  
  <p>This shows null for each array.</p>