React useState hook doesn't work as expected-CodePudding

I have a simple useState hook with which the state of selected checkboxes is managed.

The selected checkboxes should be displayed in the ui (within my filter).

The selected checkboxes are stored correctly, but only displayed when I close my filter component and open it again. Not immediately after a checkbox is checked.

Here is my current state (simplified):

Filter Component:

  const [selected, setSelected] = useState([]);

  const handleState = (id: string) => {
    const selectedIndex = selected.findIndex((i) => i.id === id);

    if (selectedIndex > -1) {
      selected.splice(checkedIndex, 1);
    } else {
      selected.push(data.find((i) => i.id === id)); 
    }

    // set the state of the selected checkboxes
    setSelected(selected);
  };

Rendering:

  {selected.length > 0 ? (
     <div className="selected-boxes">
       {selected.map((cb) => (
         <span key={cb.label}>{cb.label}</span>
       ))}
     </div>
   ) : (
   // some other stuff

CodePudding user response：

selected is an array that you mutate when some checkbox is checked but referentially this is still the same value so React won't rerender the component.

When you close the filter the component is unmounted and when you open it again it is mounted with the fresh values.

You need to return a new array instead of mutating the current one, for example like this:

// set the state of the selected checkboxes
    setSelected(selected.slice());

// set the state of the selected checkboxes
    setSelected([...selected]);

or use immer that allows you to work with immutable state in a more convenient way.