El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En React, "elevar el estado" es una técnica utilizada para compartir el estado entre varios componentes. En lugar de mantener el estado en un componente hijo, se eleva a un componente padre común para que pueda ser compartido entre varios componentes hijos. Esta técnica es esencial para mantener la sincronización del estado y la comunicación entre componentes.

Conceptos Clave

Estado Local: El estado que se mantiene dentro de un componente específico.
Estado Elevado: El estado que se mueve a un componente padre para ser compartido entre varios componentes hijos.
Props: Propiedades que se pasan de un componente padre a un componente hijo.

Ejemplo Práctico

Supongamos que tenemos dos componentes hijos que necesitan compartir el mismo estado. En lugar de mantener el estado en cada componente hijo, lo elevamos a un componente padre.

Paso 1: Crear Componentes Hijos

Primero, creamos dos componentes hijos que recibirán el estado a través de props.

// Componente Hijo 1
function ChildComponent1({ value, onChange }) {
  return (
    <div>
      <h2>Child Component 1</h2>
      <input type="text" value={value} onChange={onChange} />
    </div>
  );
}

// Componente Hijo 2
function ChildComponent2({ value }) {
  return (
    <div>
      <h2>Child Component 2</h2>
      <p>Value: {value}</p>
    </div>
  );
}

Paso 2: Crear el Componente Padre

Luego, creamos un componente padre que mantendrá el estado y pasará el estado y la función de actualización a los componentes hijos.

import React, { useState } from 'react';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

function ParentComponent() {
  const [sharedState, setSharedState] = useState('');

  const handleChange = (event) => {
    setSharedState(event.target.value);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent1 value={sharedState} onChange={handleChange} />
      <ChildComponent2 value={sharedState} />
    </div>
  );
}

export default ParentComponent;

Explicación del Código

Estado en el Componente Padre: ParentComponent mantiene el estado sharedState utilizando el hook useState.
Función de Manejo de Cambios: handleChange actualiza el estado sharedState cuando el valor del input cambia.
Pasar Props a Componentes Hijos: ParentComponent pasa el estado y la función de manejo de cambios a ChildComponent1 y el estado a ChildComponent2.

Ejercicio Práctico

Crea una aplicación React que tenga un componente padre y dos componentes hijos. El componente padre debe mantener el estado y pasarlo a los componentes hijos. Uno de los componentes hijos debe permitir al usuario actualizar el estado, y el otro debe mostrar el estado actualizado.

Solución

// App.js
import React, { useState } from 'react';

function ChildComponent1({ value, onChange }) {
  return (
    <div>
      <h2>Child Component 1</h2>
      <input type="text" value={value} onChange={onChange} />
    </div>
  );
}

function ChildComponent2({ value }) {
  return (
    <div>
      <h2>Child Component 2</h2>
      <p>Value: {value}</p>
    </div>
  );
}

function ParentComponent() {
  const [sharedState, setSharedState] = useState('');

  const handleChange = (event) => {
    setSharedState(event.target.value);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent1 value={sharedState} onChange={handleChange} />
      <ChildComponent2 value={sharedState} />
    </div>
  );
}

export default ParentComponent;

Errores Comunes

No Elevar el Estado Cuando es Necesario: Mantener el estado en componentes hijos cuando debería estar en un componente padre puede llevar a problemas de sincronización.
Pasar Funciones Incorrectamente: Asegúrate de pasar las funciones de manejo de eventos correctamente a los componentes hijos.

Consejos Adicionales

Mantén el Estado lo Más Local Posible: Solo eleva el estado cuando sea necesario compartirlo entre múltiples componentes.
Usa Hooks para Manejar el Estado: Los hooks como useState y useReducer son herramientas poderosas para manejar el estado en componentes funcionales.

Conclusión

Elevar el estado es una técnica fundamental en React para compartir el estado entre componentes. Al mover el estado a un componente padre, puedes mantener la sincronización y la comunicación entre componentes hijos de manera eficiente. Practica esta técnica en tus proyectos para dominar la gestión del estado en React.

En el próximo tema, exploraremos la Composición vs Herencia en React, una comparación importante para entender cómo estructurar tus componentes de manera efectiva.

Elevando el Estado

Conceptos Clave

Ejemplo Práctico

Paso 1: Crear Componentes Hijos

Paso 2: Crear el Componente Padre

Explicación del Código

Ejercicio Práctico

Solución

Errores Comunes

Consejos Adicionales

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa