React Context API permite compartir datos entre componentes sin pasar props manualmente a través de cada nivel del árbol. Antes de React 16.3, el API era experimental y se desaconsejaba su uso, pero la versión 16.3 mejoró el rendimiento y usabilidad al leer el contexto del Provider más cercano. Aún así, el API no es intuitivo y puede causar problemas si componentes intermedios interrumpen el flujo de datos.

1. REACT CONTEXT API
Alewar

2. QUÉ ES REACT?
• Una librería escrita en JavaScript para:
• Construir interfaces de usuario.
• Hacer código predecible y fácil de analizar.

4. PARA QUÉ CONTEXTO?
• En una aplicación típica de React, la data se pasa de
arriba hacia abajo a través de componentes.
• La data debe pasar por cada componente hasta
llegar a su destino.
• Esto puede ser fastidioso si la data y el componente
se encuentran muy separados en el árbol.

5. • El contexto proporciona una forma de
compartir data entre los componentes sin
tener que pasar explícitamente a través de
cada nivel del árbol.

6. ANTES DE REACT 16.3
• De la documentación oficial de
React:
• ”Porqué no usar el contexto”
no inspira mucha confianza.
• Para hacerlo más preocupante, el
artículo dice:
• “Si requieres que tu aplicación
sea estable, no uses contexto.
Es un API experimental y es
probable que sea deprecado en
versiones futuras de React.” 😱

7. Provider

8. Consumer

9. PUNTOS DÉBILES
• El API no es intuitivo.
• Obliga al componente a
separarse de su programación
declarativa.
• Es posible que exista una
colisión de nombres.
• Es susceptible a interrupciones
por componentes intermedios.

10. Y ahora….

11. REACT 16.3
• Cuando React dibuje un Consumer, leerá el
contexto actual del Provider más cercano
encima del árbol.

12. REACT CONTEXT API

13. Pero necesito la data en muchos otros
componentes…
Pero necesito poder actualizar la data…
Y si necesito utilizar múltiples contextos a la vez…

14. Antes que nada, pongamos algunas cosas en contexto.
Si se puede…
Vamos al código.