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;