How to use random numbers in React and keep them unchanged?-CodePudding

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.

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.

const [t, setT] = useState(1);

function clickItem(){
  console.log(t)
   setT(t   1)
   
 };

// Case 1:
 const randomItems = [Math.random(), Math.random()]
                     .map(i=><div key={i} onClick={clickItem}>{i}</div>);

// Case 2
const [list, setList] = useState([Math.random(), Math.random()]
                     .map(i=><div key={i} onClick={clickItem}>{i}</div>));


return (
    <>{randomItems}
    <hr></hr>
    {list}
    </>
);

When we click the items from the first list, they increase the "t" variable but change their values with each click.

When we click the items from the second list, they don't change their values but the value of "t" is always 1.

CodePudding user response：

Problem with first approach is as you said the random numbers are generated on each render, hence on each render your components will have new key, you don't want that usually.

Problem with second one is that, the values you passed to useState as argument will be created only once (well they might be recreated on each render but the result is discarded anyway), hence also the callback you passed to it only sees the value from the first render and only logs 1. Also usually it is not needed to put components in state.

You can generate them once and store in state, just no need to also store the react elements in state, like this:

export default function App(props) {
  let [data, setData] = React.useState([
    { id: 0, name: 'John' },
    { id: 1, name: 'Nick' },
  ]);
  return (
    <div>
      {data.map((x) => (
        <div key={x.id}>{x.name}</div>
      ))}
    </div>
  );
}

CodePudding user response：

You can save the values your want to persist to localStorage and load them into a context variable which will be used by your other components.