Ao gerenciar o estado no React, dois pontos principais devem ser considerados: desempenho e experiência do usuário.

Métodos de atualização de estado

Ao atualizar o estado, o seguinte método pode ser usado:

setCount(count   1);

No entanto, embora esse método possa parecer apropriado, ele pode levar a problemas ao acessar o valor do estado anterior durante atualizações assíncronas.

2. Atualização de estado com prevState

Se o novo estado for calculado com base no estado anterior, é essencial usar prevState para evitar possíveis problemas:

Exemplo:

setCount(prevCount => prevCount   1);

3. Atualizando Matrizes e Objetos

Ao atualizar arrays e objetos, também usamos prevState. No entanto, para o React reconhecer que o estado mudou e acionar uma re-renderização, usamos o operador spread para criar um novo objeto.

Exemplo para atualização de matrizes:

const [items, setItems] = useState([]);

setItems(prevItems => [...prevItems, item]);

Exemplo de atualização de objetos:

const [user, setUser] = useState({ name: 'John', age: 0 });

setUser(prevUser => ({
    ...prevUser,
    name: 'Alice'
}));

Conclusão

Os métodos que você usa para atualizar o estado podem afetar o desempenho do seu código. Neste artigo, examinamos os métodos corretos de atualização de estado para garantir um gerenciamento eficiente de estado.