Ako ešte môžete aktualizovať stav v React (cez funkciu s predchádzajúcou hodnotou)?

V Reacte sa často používa funkcia v setState alebo v hooku useState na aktualizáciu stavu s prihliadnutím na predchádzajúcu hodnotu.

Okrem klasickej možnosti:

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

existujú aj iné spôsoby aktualizácie, napríklad:

• Použitie funkcie na aktualizáciu v funkčných komponentoch s hookom useState:

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

setCount(prevCount => prevCount + 1);

• V useReducer je možné aktualizovať stav pomocou reduceru, ktorý prijíma aktuálny stav a akciu:

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

• V triedach je možné použiť callback v setState, aby ste získali prístup k predchádzajúcemu stavu:

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

Preto je aktualizácia pomocou funkcie s predchádzajúcou hodnotou štandardnou a odporúčanou metódou, najmä keď závisí nové stav od starého, aby sa predišlo problémom s asynchrónnosťou aktualizácií.