Jak jinak lze aktualizovat stav v Reactu (pomocí funkce s předchozí hodnotou)?

V Reactu se často používá funkce v setState nebo v hooku useState k aktualizaci stavu s ohledem na předchozí hodnotu.

Kromě klasické varianty:

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

existují i jiné způsoby aktualizace, například:

• Použití funkce aktualizace v funkčních komponentách s hookem useState:

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

setCount(prevCount => prevCount + 1);

• V useReducer lze aktualizovat stav přes reducer, který přijímá aktuální stav a akci:

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' });

• Ve třídách lze použít callback v setState pro přístup k předchozímu stavu:

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

Proto je aktualizace přes funkci s předchozí hodnotou standardní a doporučený způsob, zejména když závisí nové stav na starém, aby se předešlo problémům s asynchronností aktualizací.