Manejo de Estados Derivados en React con useState

Clase 16 de 19 • Curso de React.js: Manejo Profesional del Estado

Contenido del curso

Introducción

1
Manejo Avanzado del Estado en React.js
03:32 min

Estado y ciclo de vida con React.Component

Estados independientes y compuestos

Código imperativo y declarativo en React

Manejo del estado en TODO Machine

Próximos pasos

19
Manejo Profesional del Estado en React con Hooks y Reducers
02:04 min

Tomar examen

Resumen

¿Cómo manejar eficazmente el estado en React?

Manejar el estado es fundamental al desarrollar aplicaciones en React, y como desarrolladores, es vital conocer las diferentes maneras y paradigmas disponibles para hacerlo. En nuestra aplicación ToDoMachine, hemos utilizado estados independientes imperativos mediante React.useState. Sin embargo, llegará el momento en que podamos querer considerar el uso de estados derivados o compuestos para una gestión más eficiente.

¿Qué es un estado derivado y cómo implementarlo?

Un estado derivado se genera a partir de otros estados ya existentes. Esto significa que no se crea de manera independiente usando useState, sino que depende de las propiedades de otros estados para calcular su valor. Por ejemplo, variables como CompletedToDoos o TotalToDoos toman información de los ToDoos que ya existen para calcular sus valores, sin necesidad de definir nuevos estados.

Ejemplo de código

const completedToDoos = ToDoos.filter(todo => todo.completed).length;
const totalToDoos = ToDoos.length;

Esto asegura que no creamos estados innecesarios que solo repiten información derivada de otro estado. Sería un error común usar useState de la siguiente manera:

const [totalToDoos, setTotalToDoos] = useState(ToDoos.length); // No recomendado

En lugar de crear un estado independiente, simplemente utiliza variables derivadas, lo que es más eficiente y evita la duplicación de datos.

¿Cómo utilizar correctamente los custom hooks?

Un buen diseño de custom hooks es clave para un desarrollo de React efectivo y eficiente. En nuestro ejemplo, useToDoos es un custom hook que aprovecha otro hook personalizado useLocalStorage para gestionar los estados de localStorage:

Estructura de useToDoos

Trae información almacenada en localStorage.
Usa hooks como useState para manejar estados específicos como SearchValue y OpenModal.
Calcula estados derivados para aspectos como búsqueda de ToDoos.

Estructura del custom hook

function useToDoos() {
  const [ToDoos, saveToDoos] = useLocalStorage('ToDoos', []);
  const [searchValue, setSearchValue] = React.useState('');
  
  const completedToDoos = ToDoos.filter(todo => todo.completed).length;
  const totalToDoos = ToDoos.length;
  
  return {
    ToDoos,
    searchValue,
    completedToDoos,
    totalToDoos,
    setSearchValue,
  };
}

¿Cuándo considerar el uso de estados compuestos o useReducer?

El uso de estados compuestos permite que distintas partes de tu aplicación compartan el mismo estado de manera eficiente. Esto se puede lograr mediante useReducer, que ofrece una manera más estructurada de manejar estados complejos en React.

Ventajas de useReducer:

Mejor organización del código al agrupar lógica de actualización del estado.
Mayor escalabilidad al manejar estados complejos y múltiples actualizaciones.
Facilita la depuración al centralizar las actualizaciones de estado en una función reductora.

En resumidas cuentas, saber cuándo y cómo implementar estados derivados, custom hooks, y potencialmente useReducer, te lleva a una gestión más limpia y mantenible de tu aplicación React. Te animo a explorar estas posibilidades y evaluar dónde valdría la pena hacer cambios en tu propio código. ¡Sigue aprendiendo y perfeccionando el arte del estado en React!

Harold Zurita Simon

student•

¿Qué son los estados derivados?

. Vamos a revisar nuestra aplicación TodoMachine y averiguar que paradigmas estamos utilizando, es decir estados imperativos, independientes con React.useState. Vamos a ver dónde puede valer la pena que cambiemos eso o dónde no, y averiguar las razones detrás de estas decisiones. . Vamos a repasar el concepto de estados derivados, es decir estados que no se crean por si solos, sino que se crean a partir de los estados que ya hayamos creado antes. . Nuestro componente raíz es index.js en la carpeta src, este renderiza a nuestro componente App en el nodo con id root que se encuentra en el index.html que se encuentra en la carpeta public. .

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<div id="modal"></div>
</body>

. En primeras instancias, si analizamos el componente App nos daremos cuenta que el custom hook useTodos que estamos utilizando nos trae demasiada información. .

function App() {
  const {
    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    totalTodos,
    completedTodos,
    searchValue,
    setSearchValue,
    addTodo,
    sincronizeTodos,
  } = useTodos();
  ...
}

export default App;

. A su vez este custom hook internamente hace uso de otro custom hook llamado useLocalStorage. Es decir, parte de la información de useTodos la trae este otro custom hook pero la devolvemos con otros nombres. .

function useTodos() {
  const {
    item: todos,
    saveItem: saveTodos,
    sincronizeItem: sincronizeTodos,
    loading,
    error,
  } = useLocalStorage('TODOS_V1', []);
  
  const [searchValue, setSearchValue] = React.useState('');
  const [openModal, setOpenModal] = React.useState(false);

  const completedTodos = todos.filter(todo => !!todo.completed).length;
  const totalTodos = todos.length;

  let searchedTodos = [];
  ...
}

export { useTodos };

. Aparte del custom hook encontramos también estados creados por useState, sin embargo lo que nos interesa son los estados que encontramos inmediatamente después, como ser completedTodos, totalTodos y searchedTodos. Estos son variables que tomarán el nombre de estados derivados,los cuales no crean su propio estado, sino que utilizan la información creada anteriormente en otros estados y a partir de allí hacen algún cambio. . Un error común sería crear estos estados mediante useState y decir que su estado inicial es un estado independiente a su vez. .

const totalTodos = useState(todos.length);

. Los estados derivados no tienen que ser nuevos estados, sino que simplemente tienen que ser variables que dependen del estado. . Finalmente, tenemos al custom hook useLocalStorage que hace uso de varios estados independientes y retorna un objeto, puesto que son más de 2 elementos, en tal caso hubiese sido mejor devolver un array con su estado y actualizador. . El objetivo es ver como se vería dicho custom hook haciendo uso de useReducer. .

function useLocalStorage(itemName, initialValue) {
  const [sincronizedItem, setSincronizedItem] = React.useState(true);
  const [error, setError] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [item, setItem] = React.useState(initialValue);
  
  ...
  
  return {
    item,
    saveItem,
    loading,
    error,
    sincronizeItem,
  };
}

export { useLocalStorage };

. Otro lugar donde utilizamos un estado independiente de forma imperativa es el componente TodoForm. En este caso es el único lugar donde se utiliza este estado. .

function TodoForm({ addTodo, setOpenModal }) {
  const [newTodoValue, setNewTodoValue] = React.useState('');
  ...
}

export { TodoForm };

. Es nuestra responsabilidad discernir donde es conveniente utilizar estados independientes e imperativos con React.useState, estados compuestos y React.useReducer.

Luis Alejandro Vera Hernandez

Alejandro Calderón

Abelardo Salazar

Julian David Toro Medina

Ramiro Godoy

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

Jose Ever Muñoz Muñoz

Rodrigo Josue Goitia Quiroga

Diego Vergara

Rafael Bautista

Harold Gongora Sinisterra

Max Andy Diaz Neyra

Hector Rubio

Daniel Alberto Vega Bejarano

Kevin Toruño

Platzi Team

Jorge De La Fuente

Manejo de Estados Derivados en React con useState

Introducción

Manejo Avanzado del Estado en React.js

Estado y ciclo de vida con React.Component

Creación de Proyectos React y Manejo de Estado con Hooks y Clases

Diferencias entre Componentes de Clase y Función en React

Efectos y ciclo de vida en componentes React con useEffect

Métodos del ciclo de vida en componentes de clase React

Estados independientes y compuestos

Diferencias entre estados simples y compuestos en React

Actualización de estados en interfaces de usuario con React

Estados Compuestos en Componentes de Clase con React

Estados Compuestos con React.UseState: Manejo y Actualización Eficiente

Código imperativo y declarativo en React

Programación Imperativa vs Declarativa: Implementación en React

Programación Declarativa: Simplificación y Abstracción de Estados

Uso de UseReducer para manejar el estado en React

Creación de Reducers: If, Switch y Reducer Objects en React

Manejo de estados con useReducer en React

Manejo de Action Types y Action Creators en React Reducers

Manejo del estado en TODO Machine

Manejo de Estados Derivados en React con useState

Migración de UseState a UseReducer en React

Optimización de Custom Hooks en React sin UseReducer

Próximos pasos

Manejo Profesional del Estado en React con Hooks y Reducers