Jak jeszcze można aktualizować stan w React (za pomocą funkcji z poprzednią wartością)?

W React często używa się funkcji w setState lub w hooku useState, aby zaktualizować stan z uwzględnieniem poprzedniej wartości.

Oprócz klasycznego sposobu:

setState(prevState => ({ count: prevState.count + 1 }));

istnieją inne metody aktualizacji, na przykład:

• Użycie funkcji aktualizacji w komponentach funkcyjnych z hookiem useState:

const [count, setCount] = useState(0);

setCount(prevCount => prevCount + 1);

• W useReducer można aktualizować stan za pomocą reducera, który otrzymuje aktualny stan i akcję:

function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

• W klasach można użyć callbacka w setState, aby uzyskać dostęp do poprzedniego stanu:

this.setState((prevState) => ({ count: prevState.count + 1 }));

Dlatego aktualizacja za pomocą funkcji z poprzednią wartością jest standardową i zalecaną metodą, szczególnie gdy nowe stan zależy od starego, aby uniknąć problemów z asynchronicznością aktualizacji.