title: How to use random numbers in React and keep them unchanged?
body: <p>I need to generate a list of elements, each should have its own key. The key shouldn't be changed during the following renderings as this data is in use by other components. So, the task is: to create a list of unchanged random numbers and use them.</p>
  <p>The problem is as soon as I use them as const, they are recalculated every next render. But if I put them into state, for some reason they can't see the actual value of other state variables.</p>
  <pre><code>const [t, setT] = useState(1);
  
  function clickItem(){
    console.log(t)
     setT(t + 1)
     
   };
  
  // Case 1:
   const randomItems = [Math.random(), Math.random()]
                       .map(i=&gt;&lt;div key={i} onClick={clickItem}&gt;{i}&lt;/div&gt;);
  
  // Case 2
  const [list, setList] = useState([Math.random(), Math.random()]
                       .map(i=&gt;&lt;div key={i} onClick={clickItem}&gt;{i}&lt;/div&gt;));
  
  
  return (
      &lt;&gt;{randomItems}
      &lt;hr&gt;&lt;/hr&gt;
      {list}
      &lt;/&gt;
  );
  </code></pre>
  <p>When we click the items from the first list, they increase the &quot;t&quot; variable but change their values with each click.</p>
  <p>When we click the items from the second list, they don't change their values but the value of &quot;t&quot; is always 1.</p>