title: React useRef not updating and rendering new values
body: <p>I'm a beginner React developer and I'm having an issue with this particular code snippet.</p>
  <p>Issues:</p>
  <ol>
  <li>Not all of the dummy data is being rendered even though I directly copied its value and rendered it as separate children</li>
  <li>When I click the add button to make a new input form, it doesn't get added to the render.</li>
  </ol>
  <p>I purposely chose to use useRef instead of useState because after the user adds or edit whatever links they want, I want to send keyRef to a NoSQL database; whereas when I used useState() it was giving me stale state issues, where the array with all the links were not updated constantly.</p>
  <p>Any suggestions? Please and thank you!</p>
  <p>CodeSandbox link: <a href="https://codesandbox.io/s/react-hooks-counter-demo-forked-0bjdy?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-hooks-counter-demo-forked-0bjdy?file=/src/index.js</a></p>
  <p>App.js</p>
  <pre><code>import React, { useState, useRef } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { links } from './links';
  
  import &quot;./styles.css&quot;;
  
  function App() {
    const [loaded, setLoaded] = useState(false);
    const formRef = useRef([]);
    const keyRef = useRef([]);
  
    if (!loaded) {
      keyRef.current = links;
      links.forEach(link =&gt; RenderLinks(link.id));
      setLoaded(true);
    }
  
    function RenderLinks(id) {
      const formLength = formRef.current.length;
  
      if (id === null)
      formRef.current = [ ...formRef.current, &lt;AddLink key={formLength} id={formLength} /&gt; ];
  
      if (id &amp;&amp; !formRef.current.find(form =&gt; form.props.id === id))
      formRef.current = [ ...formRef.current, &lt;AddLink key={formLength} id={formLength} /&gt; ];
    }
  
    function AddLink(props) {
      const id = props.id;
      const value = keyRef.current[id] ? keyRef.current[id].link : '';
      const [input, setInput] = useState(value);
      keyRef.current = [
        ...keyRef.current,
        {
          id: id,
          link: '',
        }
      ];
      return &lt;input onChange={e =&gt; setInput(e.target.value)} value={input} /&gt;
    }
  
    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; RenderLinks(null)}&gt;add&lt;/button&gt;
        {formRef.current ? formRef.current.map(child =&gt; child) : null}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>links.js aka dummy data</p>
  <pre><code>export const links = [
    {
      id: 0,
      link: &quot;www.zero.com&quot;
    },
    {
      id: 1,
      link: &quot;www.one.com&quot;
    },
    {
      id: 2,
      link: &quot;www.two.com&quot;
    },
    {
      id: 3,
      link: &quot;www.three.com&quot;
    },
    {
      id: 4,
      link: &quot;www.four.com&quot;
    },
    {
      id: 5,
      link: &quot;www.five.com&quot;
    },
    {
      id: 6,
      link: &quot;www.six.com&quot;
    },
    {
      id: 7,
      link: &quot;www.seven.com&quot;
    }
  ];
  
  </code></pre>