Publicación: about 1 month

Elevar el estado en React (Lifting state up)


Qué es
Es una técnica o patrón para mantener dos o más componentes sincronizados a partir de un mismo estado. El estado debe ser gestionado por el componente padre más cercano o es su defecto, crear uno nuevo.

Cuando utilizarlo
  • Cuando varios componentes dependen de la misma data
  • Cuando necesitamos centralizar la lógica de negocio
  • Cuando tenemos estados duplicados en varios componentes
  • Cuando hay pocos niveles entre el componente padre y los hijos

Cómo utilizarlo
Para ejemplificar el uso de lifting state up, vamos a suponer que necesitamos una aplicación para dar de alta y listar películas.

Una solución sería crear un único componente donde se realicen ambas tareas. Sin embargo, eso no es escalable. Lifting state up nos dice: mantengamos un componente padre para facilitar la sincronizar de la data. 

Para nuestro caso, vamos a crear tres componentes: 

  • App (Almacena en un estado todas las películas)
    • MovieList (Lista las películas con base en el estado de su padre)
    • MovieForm (Crea y notifica a su componente padre sobre las películas creadas)

1. Componente MovieForm
import { useState } from 'react';

function MovieForm({ onChange }) {
  const [name, setName] = useState('');
  const [rating, setRating] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!name || !rating) return;

    onChange({ name, rating: Number(rating) });

    setName('');
    setRating('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="Nombre de la película"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        placeholder="Puntuación"
        type="number"
        value={rating}
        onChange={(e) => setRating(e.target.value)}
      />
      <button type="submit">Agregar</button>
    </form>
  );
}

export default MovieForm;

2. Componente MovieList
function MovieList({ movies }) {
  return (
    <ul>
      {movies.map((movie, index) => (
        <li key={index}>
          {movie.name} - Puntuación: {movie.rating}
        </li>
      ))}
    </ul>
  );
}

export default MovieList;

3. Componente App
import { useState } from 'react';
import MovieForm from './MovieForm';
import MovieList from './MovieList';

function App() {
  const [movies, setMovies] = useState([]);

  const handleAddMovie = (movie) => {
    setMovies((prev) => [...prev, movie]);
  };

  return (
    <>
      <MovieForm onChange={handleAddMovie} />
      <MovieList movies={movies} />
    </>
  );
}

export default App;