React Context DevTool

React Context DevTool

Depurar Context API de ReactJS con React Context Devtool

#react

Ú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! 🥳

Espero que te haya gustado este artículo. ❤️