How I can operate on the current state right after updating it in the same function?

Question

Essentially I have this state object and this method:

const [groupData, setGroupData] = useState({});
// groupData state 
        groupData = {
           group1: [
              { id: 1, name: Mike, age: 24 },
              { id: 2, name: Bob, age: 31 }
           ],
           group2: [
              { id: 3, name: Christin, age: 21 },
              { id: 4, name: Michelle, age: 33 }
           ],
        }

const stateRef = useRef();

stateRef.current = groupData;

const handleRemovePerson = (personToRemoveById: string) => {
   
    const filteredGroupData = Object.fromEntries(
      Object.entries(groupData).map(([key, value]) => {
        return [key, value.filter((person) => person.id !== personToRemoveById)];
      }),
    );

    setMainContentData(filteredGroupData);

    // Now check if group array does not have anymore persons, if empty then delete 
       group array

    console.log('stateRef', stateRef);
    // outputs the correct current data
    const filteredStateRef = Object.keys(stateRef).map((key) => stateRef[key]);

    console.log('filteredStateRef', filteredStateRef);
    // outputs previous data ??
};

I tried useRef and once I loop through it, it gives me back the previous data. How can I get the most current data after setting state and then operating on that new data right away? Thank you!

Answer 1

First of all, you can't access the state after using setState because it's an asynchronous operation and if you want to check something after using setState you need use useEffect hook to listen for state change and decide what to do with it, or in recent versions of react and react-dom you could use a not so suggested function called flushSync which will would update the state synchronously.

so the prefered way is to use useEffect like this:

const handleRemovePerson = (personToRemoveById: string) => {
  const filteredGroupData = Object.fromEntries(
    Object.entries(groupData).map(([key, value]) => {
      return [key, value.filter((person) => person.id !== personToRemoveById)];
    }),
  );

  setMainContentData(filteredGroupData);
};

useEffect(() => {
  if(true/**some conditions to prevents extra stuff */){
    // do your things, for example:
    console.log('stateRef', stateRef);
    // outputs the correct current data
    const filteredStateRef = Object.keys(stateRef).map((key) => stateRef[key]);
  }
}, [mainContentData, /**or other dependencies based on your needs */])