I have function makeid

const makeid = (length) => {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i  ) {
    result  = characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
};

and i have function createArray use makeid

const createArray = (x) => {
  let array = [];
  const object = {
    id: makeid(5),
  };
  for (let i = 1; i <= x; i  ) {
    array.push(object);
  }
  return array;
};

& I create func nummberOfColumns

let a = [];
[...studentObject, ...createArray((5 -studentObject.length)].map((ele) => {
      a.push({
        id: ele.id,
        });
});
return a

then I use number Of Columns.map() to return the </th> tag. In this tag I use onChange, but every time onChange the id changes to another id, I don't want that to happen. I tried using Usememo but it didn't work.

CodePudding user response：

Use useEffect with an empty dependencies array ([]). There, initiate all your code and attach the result to a state. You can use useState to manage that. It's happening because on each change in a tree, all the subtree re-renders. useEffect with an empty array only runs after mounting and first update (layout and paint). If you want to use useMemo, make sure to pass an empty array as well to prevent from re-calculation when a dependency changes.

useEffect(function(), [])

useMemo(function(), [])