UseState doesn't update in componentDidMount lifecycle method

Question

Recently I am practicing my react skill and trying to build an easy component, and I fall into a confusing situation.

Here is the code, I am wondering why my react page doesn't render the data after I unshift it(should render Select All option), I do some research about it and I know the issue is closure(useState set method not reflecting change immediately), but I am still confusing if it is the case, when it goto useEffect, it's closure is the original data and I unshift it, then setState should update the data after.

I know I can fix it by creating a temporary variable in useEffect and setState with it but I am still wondering how it work and what happen behind the scene.

import React, { useState, useEffect } from "react";

const selections = ["Kosher", "No Celery(inc celeriac)", "No Egg"];
const dataConfig = selections.map((selection) => ({
  value: selection,
  isSelect: false
}));

const Selector = () => {
  const [data, setData] = useState(dataConfig);

  useEffect(() => {
    data.unshift({
      value: "Select All",
      isSelect: false
    });
    setData(data);
  }, []);



  return (
    <div className="container">
      {console.log(data)}
      {data.map((ele, idx) => {
        return (
          <div key={Math.random()}>
            <input type="checkbox" value={ele.value} />
            <label>{ele.value}</label>
          </div>
        );
      })}
    </div>
  );
};

export default Selector;

Answer 1

Array.prototype.unshift() mutates the array in-place. React doesn't detect that your state has changed because the object reference is the same.

See Bailing out of a state update

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

Try this instead which creates a new array, thus triggering a state change

setData(prev => [{
  value: "Select All",
  isSelected: false,
}, ...prev]);