Comunicación entre componentes en React

En este post te explico la comunicación entre componentes en React, enfocado como un experto real lo necesita entender.

En React, tenemos componentes que se comunican entre sí para pasar datos y acciones.

Los patrones más comunes para esta comunicación son:

1. Props drilling (perforación de props)
2. Lifting state up (elevar el estado)

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
• En el post de componentes en React se dan los primeros pasos para crear un componente.

Crear un proyecto de prueba

Antes de explicar los Hooks, vamos a crear un proyecto react para realizar los ejercicios que explicaremos a continuación:

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src donde crearemos los componentes

¿Qué es Props Drilling?

Props drilling ocurre cuando tienes que pasar props (datos o funciones) a través de varios niveles de componentes, incluso si algunos de esos componentes no usan esos datos directamente.

👉 Es como pasar una carta de mano en mano hasta que llegue a quien realmente la necesita.

Ejemplo, en el archivo App.tsx:

import "./App.css";

function Parent({ user }: { user: string }) {
  return <Child user={user} />;
}

function Child({ user }: { user: string }) {
  return <GrandChild user={user} />;
}

function GrandChild({ user }: { user: string }) {
  return <p>Hola, {user}!</p>;
}

function App() {
  return (
    <div>
      <Parent user="Juan" />
    </div>
  );
}

export default App;

🔵 Aquí App pasa user a Parent, Parent lo pasa a Child, y Child a GrandChild.

¿Por qué es un problema?

• Código más largo y menos limpio.
• Los componentes intermedios tienen que manejar props que no les interesan.
• Si tienes muchos niveles, se vuelve muy difícil de mantener.

¿Qué es Lifting State Up?

Lifting state up significa mover el estado hacia el ancestro más cercano en común de dos o más componentes que necesiten compartir o sincronizar datos.

👉 En lugar de que cada componente tenga su propio estado, haces que el padre controle ese estado y se lo pase a los hijos.

Ejemplo:

Digamos que tienes dos inputs y quieres sumar sus valores:

import { useState, type Dispatch, type SetStateAction } from "react";
import "./App.css";

function InputNumber({
  value,
  onChange,
}: {
  value: number;
  onChange: Dispatch<SetStateAction<number>>;
}) {
  return (
    <input
      type="number"
      value={value}
      onChange={(e) => onChange(Number(e.target.value))}
    />
  );
}
function Resultado({ suma }: { suma: number }) {
  return <h2>Resultado: {suma}</h2>;
}

function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  return (
    <div>
      {" "}
      <InputNumber value={num1} onChange={setNum1} />{" "}
      <InputNumber value={num2} onChange={setNum2} />{" "}
      <Resultado suma={num1 + num2} />{" "}
    </div>
  );
}

export default App;

🔵 Aquí App tiene el estado de ambos números, y lo pasa como props a los inputs y al resultado.

¿Por qué es una buena práctica?

• El estado vive donde debe vivir (en el ancestro en común).
• Evitas inconsistencias entre componentes.
• Facilita la sincronización de datos relacionados.

Diferencias en resumen:

¿Entonces cuándo usar cada uno?

✅ Props drilling no siempre es malo, pero si ves que hay más de 2-3 niveles pasando props innecesarias, deberías pensar en otras soluciones (como Context o Redux).

✅ Lifting state up es bueno siempre que quieras que dos o más componentes compartan datos o comportamientos.

Extra de experto

Si props drilling se vuelve incontrolable, React te ofrece soluciones como:

• Context API → Compartir datos globalmente sin pasar props.
• Redux, Zustand, Jotai → Manejo global de estados en apps grandes.