Recarregar componente React sem precisar atualizar toda a página

No desenvolvimento com React, muitas vezes queremos atualizar apenas um componente específico após uma ação, como o upload de um avatar, sem precisar recarregar a página inteira. A solução mais comum é usar o estado local do componente ou alguma forma de controle de renderização.

Por exemplo, podemos usar um estado booleano que, ao ser atualizado, força a re-renderização do componente. Assim, ao fazer o upload, basta alterar esse estado. Outra abordagem mais avançada é usar um hook personalizado que gerencia a atualização, ou até mesmo o contexto de React para controlar o ciclo de vida de um componente.

O desafio é garantir que essa atualização seja reativa ao evento, sem impactar outros componentes ou a navegação. Essa estratégia ajuda na experiência do usuário, evitando loads completos e mantendo a interface mais fluida. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

O que vocês usam na prática para evitar recarregamentos completos? Alguma dica para lidar com componentes que dependem de dados assíncronos e precisam de uma atualização pontual?