Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

CÓMO INSPECCIONAR ESTADO Y PROPS EN REACT

November 20, 2025

Introducción a la inspección de React

React es una de las bibliotecas más populares para construir interfaces de usuario dinámicas y eficientes. Sin embargo, desarrollar aplicaciones con esta tecnología puede volverse complejo si no se cuenta con herramientas adecuadas para depurar y entender el comportamiento de los componentes. Una de las tareas más comunes al trabajar con React es inspeccionar el estado y props de componentes para comprender cómo fluyen los datos y detectar posibles errores. Este tutorial te guiará paso a paso sobre cómo utilizar React Developer Tools, una extensión para navegadores que permite visualizar y modificar el estado y las props de tus componentes en tiempo real, directamente desde Chrome o Firefox. A lo largo de este artículo, exploraremos cómo instalar esta herramienta, navegar por su interfaz y aplicar sus funcionalidades en proyectos prácticos, con ejemplos de código que ilustran su uso.

Instalación de React Developer Tools

Para comenzar a inspeccionar el estado y las props de tus componentes, el primer paso es instalar React Developer Tools. Esta extensión está disponible tanto para Chrome como para Firefox y es compatible con aplicaciones React modernas. Puedes encontrarla en la Chrome Web Store o en el catálogo de complementos de Firefox. Una vez instalada, la extensión se integra automáticamente en las herramientas de desarrollo del navegador, añadiendo una pestaña específica para React.

En Chrome, sigue estos pasos:

  1. Abre la Chrome Web Store.
  2. Busca “React Developer Tools”.
  3. Haz clic en “Añadir a Chrome” y confirma la instalación.

En Firefox, el proceso es similar:

  1. Visita el catálogo de complementos de Firefox.
  2. Busca “React Developer Tools”.
  3. Selecciona “Añadir a Firefox” y acepta los permisos.

Una vez instalada, abre las herramientas de desarrollo del navegador (puedes hacerlo con Cmd+Option+I en macOS o Ctrl+Shift+I en Windows/Linux) en cualquier aplicación React. Verás dos nuevas pestañas: Components y Profiler. La pestaña Components es la que utilizaremos principalmente para inspeccionar el estado y las props.

Exploración de la pestaña Components

La pestaña Components de React Developer Tools muestra una vista en árbol de todos los componentes de tu aplicación React. Esta estructura jerárquica refleja cómo los componentes están anidados en el DOM virtual de React, lo que facilita identificar relaciones entre padres e hijos. Al seleccionar un componente en el árbol, el panel derecho de la extensión muestra información detallada, como las props pasadas al componente, su estado actual y los hooks utilizados (si tu aplicación usa componentes funcionales).

Por ejemplo, imagina que tienes una aplicación sencilla con un componente Counter que maneja un contador. El código podría verse así:

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Conteo: {count}</p>
            <button onClick={() => setCount(count + 1)}>Incrementar</button>
        </div>
    );
}

export default Counter;

Si inspeccionas esta aplicación con React Developer Tools, verás el componente Counter en la pestaña Components. Al seleccionarlo, el panel derecho mostrará:

  • Estado: Un objeto que contiene count con su valor actual (por ejemplo, 0).
  • Hooks: Información sobre el hook useState utilizado.
  • Props: Cualquier prop pasada al componente, si aplica.

Esta vista te permite entender rápidamente el estado interno del componente sin necesidad de agregar console.log o puntos de interrupción en el código.

Inspección de props en componentes

Las props son un mecanismo fundamental en React para pasar datos de un componente padre a un componente hijo. Con React Developer Tools, puedes inspeccionar las props de cualquier componente en la jerarquía. Esto es especialmente útil cuando trabajas con componentes reutilizables que reciben múltiples props, ya que te permite verificar si los datos se están pasando correctamente.

Considera el siguiente ejemplo, donde un componente Greeting recibe una prop name:

import React from "react";

function Greeting(props) {
    return <h1>Hola, {props.name}!</h1>;
}

function App() {
    return <Greeting name="Ana" />;
}

export default App;

Al inspeccionar el componente Greeting en la pestaña Components, el panel derecho mostrará una sección de props con el valor name: "Ana". Si la prop no se muestra como esperabas, podrías identificar errores como un nombre de prop mal escrito o un valor no definido en el componente padre.

Además, React Developer Tools resalta las props que cambian entre renderizados, lo que te ayuda a detectar actualizaciones innecesarias que podrían afectar el rendimiento. Por ejemplo, si pasas un objeto como prop y su referencia cambia en cada renderizado, la extensión te alertará sobre posibles optimizaciones, como usar useMemo para estabilizar la referencia.

Modificación del estado en el navegador

Una de las características más poderosas de React Developer Tools es la capacidad de modificar el estado en tiempo real. Esto es útil para probar cómo un componente responde a diferentes valores de estado sin necesidad de alterar el código o recargar la página. Al seleccionar un componente en la pestaña Components, puedes editar los valores del estado directamente en el panel derecho.

Volvamos al ejemplo del componente Counter. Si seleccionas Counter y haces clic en el valor de count en el panel derecho, puedes ingresar un nuevo número, como 10. Al presionar Enter, el componente se vuelve a renderizar automáticamente, mostrando el nuevo valor en la interfaz. Este cambio no persiste en el código fuente, pero es ideal para experimentar con diferentes escenarios.

Por ejemplo, si tu componente depende de un estado complejo, como un objeto:

import React, { useState } from "react";

function UserProfile() {
    const [user, setUser] = useState({
        name: "Ana",
        age: 25,
    });

    return (
        <div>
            <p>Nombre: {user.name}</p>
            <p>Edad: {user.age}</p>
            <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
                Cumplir años
            </button>
        </div>
    );
}

export default UserProfile;

En React Developer Tools, puedes modificar el campo name o age del estado directamente. Por ejemplo, cambiar name a “Carlos” actualizará la interfaz al instante, permitiéndote probar cómo se comporta el componente con diferentes datos.

Depuración de problemas comunes

Cuando trabajas con React, es común enfrentar problemas relacionados con el estado o las props. React Developer Tools puede ayudarte a identificar y resolver estos errores de manera eficiente. Algunos escenarios comunes incluyen:

  • Props no recibidas: Si un componente no muestra los datos esperados, verifica en la pestaña Components si las props se están pasando correctamente desde el padre. Un error típico es pasar un nombre de prop incorrecto o un valor indefinido.
  • Estado no actualizado: Si un componente no refleja los cambios en el estado, inspecciona el estado actual en la extensión. Podrías descubrir que el estado no se está actualizando debido a una mutación directa (en lugar de usar setState o un setter de useState) o una clave de renderizado incorrecta.
  • Re-renderizados innecesarios: Si sospechas que un componente se está renderizando demasiado, usa la pestaña Profiler para analizar el rendimiento. Aunque nos enfocamos en la pestaña Components, el Profiler puede complementar tu depuración al mostrar qué componentes se renderizan y por qué.

Por ejemplo, si tienes un componente que no actualiza su estado correctamente:

import React, { useState } from "react";

function BrokenCounter() {
    const [count, setCount] = useState(0);

    // Error: Mutación directa del estado
    const handleClick = () => {
        count++; // ¡Esto no funciona en React!
        console.log(count);
    };

    return (
        <div>
            <p>Conteo: {count}</p>
            <button onClick={handleClick}>Incrementar</button>
        </div>
    );
}

export default BrokenCounter;

Al inspeccionar este componente, notarás que el estado count no cambia, aunque el console.log muestra un valor incrementado. Esto indica un error en la lógica de actualización del estado. La solución es usar el setter de useState:

const handleClick = () => {
    setCount(count + 1);
};

Uso avanzado con hooks

En aplicaciones React modernas, los hooks como useState, useEffect y useContext son fundamentales. React Developer Tools proporciona información detallada sobre los hooks utilizados por un componente, lo que facilita la depuración de problemas relacionados con efectos secundarios o estado derivado.

Por ejemplo, considera un componente que usa useEffect para cargar datos:

import React, { useState, useEffect } from "react";

function DataFetcher() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch("https://api.example.com/data")
            .then((response) => response.json())
            .then((result) => setData(result))
            .catch((error) => console.error(error));
    }, []);

    return <div>{data ? JSON.stringify(data) : "Cargando..."}</div>;
}

export default DataFetcher;

En la pestaña Components, puedes inspeccionar el estado data y el hook useEffect. Si el componente no muestra los datos esperados, puedes verificar si data es null o si el hook useEffect se ejecutó correctamente. También puedes modificar data manualmente para simular diferentes respuestas de la API.

Integración con flujos de trabajo modernos

React Developer Tools no solo es útil para depuración manual, sino que también se integra bien con flujos de trabajo modernos de desarrollo. Por ejemplo, puedes combinar la extensión con herramientas como Vite, Webpack o Create React App para inspeccionar aplicaciones en desarrollo o producción. Además, la extensión es compatible con frameworks como Next.js, lo que te permite depurar aplicaciones renderizadas en el servidor o estáticas.

En un proyecto con una estructura típica, podrías tener:

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── Counter.js
│   │   ├── Greeting.js
│   ├── App.js
│   ├── index.js
├── package.json

Al ejecutar tu aplicación con npm start (en Create React App) o npm run dev (en Vite), abre las herramientas de desarrollo y usa React Developer Tools para inspeccionar los componentes en src/components/. Esto es especialmente útil en proyectos grandes, donde la jerarquía de componentes puede ser compleja.

Personalización de la experiencia

React Developer Tools ofrece opciones para personalizar tu experiencia de depuración. En la configuración de la extensión (accesible desde las herramientas de desarrollo), puedes ajustar aspectos como:

  • Filtrado de componentes: Oculta componentes específicos en el árbol para enfocarte en los relevantes.

  • Resaltado de actualizaciones: Habilita el resaltado visual de componentes que se renderizan, útil para identificar re-renderizados innecesarios.

  • Modo oscuro: Cambia el tema de la interfaz para mayor comodidad.

Estas opciones te permiten adaptar la herramienta a tus necesidades, especialmente si trabajas en proyectos con muchos componentes o en entornos de desarrollo prolongados.

Conclusiones

React Developer Tools es una extensión indispensable para cualquier desarrollador que trabaje con React. Al permitir inspeccionar y modificar el estado y props en tiempo real, esta herramienta simplifica la depuración, acelera el desarrollo y mejora la comprensión de cómo fluyen los datos en una aplicación. Desde la instalación hasta el uso avanzado con hooks y la integración con flujos de trabajo modernos, este tutorial ha cubierto los aspectos esenciales para aprovechar al máximo la extensión. Con ejemplos prácticos y un enfoque en escenarios reales, ahora tienes las habilidades necesarias para depurar tus aplicaciones React de manera eficiente. Experimenta con la herramienta en tus proyectos y descubre cómo puede transformar tu proceso de desarrollo.