Sobes.tech
Middle

Como mais se pode atualizar o estado no React (através de uma função com o valor anterior)?

sobes.tech IA

Resposta da IA

No React, para atualizar o estado considerando o valor anterior, muitas vezes usa-se uma função no setState ou no hook useState.

Além da opção clássica:

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

existem outras formas de atualizar, por exemplo:

  • Utilização da função de atualização em componentes funcionais com o hook useState:
const [count, setCount] = useState(0);

setCount(prevCount => prevCount + 1);
  • No useReducer, é possível atualizar o estado através de um redutor que recebe o estado atual e a ação:
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' });
  • Em classes, pode-se usar um callback em setState para acessar o estado anterior:
this.setState((prevState) => ({ count: prevState.count + 1 }));

Portanto, atualizar através de uma função com o valor anterior é uma forma padrão e recomendada, especialmente quando o novo estado depende do antigo, para evitar problemas com a asincronia das atualizações.