React Context DevTool ⚛️

Últimamente no tengo tiempo para nada, entre vacaciones y el nuevo trabajo no paro nada de nada. Me paso el día estudiando y estudiando 🤓.

Hace poco pensaba, como en multitud de sitios Context API se va abriendo hueco y Redux en muchos casos deja de usarse. No se exactamente si esto realmente es una buena o mala práctica. Supongo que depende. Pero si hay algo que se lee mucho en los foros y las documentaciones es que Context API no es un state management.

No voy a entrar en la polémica, solo pretendo introduciros una utilidad que echaba de menos desde Redux. Y así, como Redux tiene sus Redux Devtools, que permiten saber qué narices está pasando con el estado de nuestra aplicación, no dejaba de preguntarme su existía algo aplicable a los contextos.

Pues bien, existe, se llama React Context DevTool, y cómo no, tenemos las extensiones propias para Chrome y Firefox.

Ahora puedes depurar fácilmente tu contexto en tu aplicación React con vistas de árbol, raw y diff. 😄

Instalación

1. Descarga la extensión para Chrome o Firefox.
2. Añade la propiedad displayName en el Provider

<MyContext.Provider value={{ a: 'hello', b: 'world' }} displayName="Context Display Name">
  <YourComponent />
</MyContext.Provider>

o bien asigna el nombre a mostrar en el Context:

MyContext.displayName = 'Context Display Name'

¡Y listo! 🥳