¿Cuáles son las características de rendimiento de React Context y cómo evitas que vuelva a renderizar media aplicación?

Cada consumidor se vuelve a renderizar cuando el valor del provider cambia por referencia, sin importar qué parte del valor lea, porque el contexto no tiene selectores. Un provider que guarda un objeto grande creado de cero en cada render acabará re-renderizando a todos los consumidores constantemente. Se arregla memoizando el valor, separando estado y dispatch en contextos distintos, o guardando los datos en un store externo al que los consumidores se suscriben con selectores.

Context es ante todo un mecanismo de inyección de dependencias y, de lejos, un gestor de estado en segundo lugar. El problema de rendimiento es que los consumidores se suscriben al valor entero, así que cuando el valor del provider cambia de identidad, todos los consumidores por debajo renderizan, incluso uno que solo lee un booleano. Lo primero que reviso es si el provider está construyendo un objeto nuevo en línea dentro del JSX, porque eso es una referencia nueva en cada render del padre y echa por tierra todo lo demás. Después separo contextos, porque normalmente los datos cambian a menudo y los setters no cambian nunca, así que poner el dispatch en su propio contexto corta la mayor parte del ruido. Si todavía necesito selectores, dejo de fingir que el contexto es un store y pongo el estado en uno de verdad, y me suscribo con useSyncExternalStore o con una librería para que cada componente elija su porción. Donde el contexto sigue siendo excelente es en cosas estables: el tema, el usuario actual, el idioma, una instancia de cliente. Eso cambia casi nunca, así que el coste del re-render da igual.