Why is useState not triggering re-render?

Question

I've initialized a state that is an array, and when I update it my component does not re-render. Here is a minimal proof-of-concept:

function App() {
  const [numbers, setNumbers] = React.useState([0, 1, 2, 3]);
  console.log("rendering...");
  return (
    <div className="App">
      {numbers.map(number => (
        <p>{number}</p>
      ))}
      <input
        type="text"
        value={numbers[0].toString()}
        onChange={newText => {
          let old = numbers;
          old[0] = 1;
          setNumbers(old);
        }}
      />
    </div>
  );
}

Based on this code, it seems that the input should contain the number 0 to start, and any time it is changed, the state should change too. After entering "02" in the input, the App component does not re-render. However, if I add a setTimeout in the onChange function which executes after 5 seconds, it shows that numbers has indeed been updated.

Any thoughts on why the component doesn't update?

Here is a CodeSandbox with the proof of concept.

Answer 1

You're calling setNumbers and passing it the array it already has. You've changed one of its values but it's still the same array, and I suspect React doesn't see any reason to re-render because state hasn't changed; the new array is the old array.

One easy way to avoid this is by spreading the array into a new array:

setNumbers([...old])

Answer 2

You need to copy numbers like so let old = [...numbers];

useState doesn't update the value only if it has changed so if it was 44 and it became 7 it will update. but how can it know if an array or object have changed. it's by reference so when you do let old = numbers you are just passing a reference and not creating a new one

Answer 3

You can change state like this

const [state, setState] = ({})
setState({...state})

or if your state is Array you can change like this

const [state, setState] = ([])
setState([...state])

Answer 4

Others have already given the technical solution. To anyone confused as to why this happens, is because setSomething() only re renders the component if and only if the previous and current state is different. Since arrays in javascript are reference types, if you edit an item of an array in js, it still doesn't change the reference to the original array. In js's eyes, these two arrays are the same, even though the original content inside those arrays are different. That's why setSomething() fails do detect the changes made to the old array.

Note that if you use class components and update the state using setState() then the component will always update regardless of whether the state has changed or not. So, you can change your functional component to a class component as a solution. Or follow the answers provided by others.

Answer 5

I was working on an array that had objects in it and I tried few of the above.

My useState is :

const [options, setOptions] = useState([
{ sno: "1", text: "" },
{ sno: "2", text: "" },
{ sno: "3", text: "" },
{ sno: "4", text: "" },
]);

Now I want to add more options with blank field on a click of a button I will use the following way to achieve my purpose:

<button
    onClick={() => {
      setOptions([...options, { sno: newArray.length + 1, text: "" }]);
    }}
  >

This solved my problem and I was able to re render the component and added an object to the array.

Answer 6

introduces an array of the component that is not the one of the hook. for instance:

const [numbers, setNumbers] = useState([0, 1, 2, 3]);

var numbersModify = []; //the value you want

and at the end:

setNumbers(numbersModify)

modify this numbersModify, when the hook refreshes it will return to 0 numbersModify and the hook will keep the state. Therefore, the problem of not seeing the changes will be eliminated.

:D

Answer 7

  //define state using useState hook
  const [numbers, setNumbers] = React.useState([0, 1, 2, 3]);

  //copy existing numbers in temp
  let tempNumbers = [...numbers];
  // modify/add no
  tempNumbers.push(4);
  tempNumbers[0] = 10;
  // set modified numbers
  setNumbers(tempNumbers);

Answer 8

I dont have any proud of this but it works

anotherList = something
setSomething([])
setTimeout(()=>{ setSomething(anotherList)},0)

Answer 9

useState is a React hook which provides functionality of having State in a functional component. Usually it informs React to re-render the component whenever there is change in useState variables.

{
      let old = numbers;
      old[0] = 1;
      setNumbers(old);
}

In the above code since you are referring to the same variable it stores the reference not the value hence React doesn't know about the latest changes as the reference is same as previous.

To overcome use the below hack, which will not copy the reference instead it's a deep copy(copies the values)

{
      let old = JSON.parse(JSON.stringify(numbers));
      old[0] = 1;
      setNumbers(old);
}

Happy coding :)