Quais são as características de performance do React Context, e como você impede que ele re-renderize metade da aplicação?

Todo consumidor re-renderiza quando o valor do provider muda por referência, não importa qual parte do valor ele lê, porque context não tem seletor. Um provider segurando um objeto grande construído do zero a cada render vai, portanto, re-renderizar todos os consumidores o tempo todo. Conserte memoizando o valor, separando estado e dispatch em contexts diferentes, ou guardando os dados numa store externa que os consumidores assinam com seletores.

Context é primeiro um mecanismo de injeção de dependência e um gerenciador de estado num distante segundo lugar. O problema de performance é que os consumidores assinam o valor inteiro, então quando o value do provider muda de identidade, todo consumidor abaixo dele renderiza, até um que só lê um booleano. A primeira coisa que eu checo é se o provider está construindo um objeto novo inline no JSX, porque isso é uma referência nova a cada render do pai e anula tudo. Depois disso eu separo os contexts, porque normalmente os dados mudam com frequência e os setters nunca mudam, então colocar o dispatch no próprio context corta a maior parte da agitação. Se eu ainda preciso de seletores, eu paro de fingir que context é uma store e coloco o estado numa store de verdade, aí assino com useSyncExternalStore ou uma biblioteca para cada componente pegar a fatia dele. Onde context continua excelente é em coisas estáveis: tema, usuário atual, um locale, uma instância de client. Essas mudam quase nunca, então o custo de re-render é irrelevante.