Eliminación de React Context mediante Custom Hooks en React

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:39

Eliminación de React Context mediante Custom Hooks en React

Curso de React.js: Patrones de Render y Composición

Clase 7 de 19

Clase 7 / 19

Recursos

Al reformar una aplicación, a veces descubrimos que algunas herramientas o métodos que inicialmente parecían necesarios, como React Context, pueden volver a evaluarse e incluso eliminarse. En este caso, una composición inteligente de componentes nos ha llevado a un punto donde el uso de React Context podría no ser ya esencial. Con un dominio adecuado de la arquitectura de nuestra aplicación y un tamaño manejable de nuestro dom, podemos buscar formas más sencillas y directas de pasar información entre componentes.

¿Cómo simplificar la arquitectura de una aplicación en React?

Reconsiderar la necesidad de React Context

React Context es ampliamente usado para evitar el "prop drilling" o pasar propiedades manualmente a través de un árbol de componentes. Sin embargo, su uso puede no ser necesario si la aplicación no es lo suficientemente compleja o si la estructura de componentes está bien compuesta.

Verifica dónde y cómo estás utilizando React Context.
Evalúa si la información se está pasando sólo entre algunos componentes cercanos y no a través de toda la aplicación.

Refactorización directa en el componente principal

Una vez determinada la innecesaria complejidad que introduce React Context, se puede proceder a una simplificación:

Mueve la lógica de estado y datos del componente que utiliza React Context al componente principal.
Reemplaza el uso de React Context con un Custom Hook que maneje la lógica y el estado.

Adaptando los componentes hijo

Después de retirar React Context, ajusta los componentes que dependían de él:

Cambia las llamadas previas al Context por propiedades pasadas directamente a los componentes.
Asegúrate de pasar todas las funciones y estados necesarios como props a los componentes que los necesiten.

¿Qué debemos tener en cuenta al eliminar React Context?

Actualización de los imports

Al reestructurar la aplicación, es esencial actualizar los imports para reflejar los cambios en la ubicación y uso de las funciones y lógica de estado.

Asegúrate de que todos los imports reflejen las nuevas ubicaciones de los archivos y componentes.
Utiliza herramientas de tu IDE para actualizar automáticamente las importaciones si es posible.

Mantenimiento y eliminación de código obsoleto

Después de adaptar tu aplicación, es probable que te encuentres con código obsoleto y archivos que ya no son necesarios.

Elimina cualquier archivo, como los del Context que ya no se utilizan.
Revisa cuidadosamente cada componente para asegurarte de que no queden referencias a Context que no se hayan eliminado.

Pruebas finales

La eliminación de una herramienta como React Context puede tener implicaciones en toda la aplicación.

Realiza pruebas exhaustivas para asegurarte de que todos los componentes funcionan correctamente tras los cambios.
Cualquier error encontrado deberá ser corregido, posible mente ajustando las nuevas props pasadas a los componentes.

Gracias a estos pasos, es completamente factible eliminar React Context de tu aplicación si la buena composición de componentes así lo permite. Mantente siempre abierto a la idea de que cada proyecto tiene sus particularidades y esto no siempre será aplicable. No obstante, cuando sea posible, disfrutarás de una simplificación en la arquitectura de tu aplicación que vale la pena explorar. Recuerda, seguir aprendiendo y desafiando tu enfoque actual es fundamental para tu crecimiento como desarrollador. ¡Sigue adelante!

Andrés Esteban Rodríguez Jiménez

Hace 4 años

Composición de componentes sin React Context

Gracias a que no tenemos una aplicación que sea demasiado grande, podemos prescindir de usar React.useContext() usando la composición de componentes.

// Estos son los imports con los que funciona la aplicación
import { TodoCounter } from '../Components/TodoCounter/TodoCounter';
import { TodoSearch } from '../Components/TodoSearch/TodoSearch';
import { TodoList } from '../Components/TodoList/TodoList';
import { TodoItem } from "../Components/TodoItem/TodoItem";
import { TodoForm } from "../Components/TodoForm/TodoForm";
import { CreateTodoButton } from '../Components/CreateTodoButton/CreateTodoButton';
import { Modal } from "../Components/Modal/Modal";

...
function AppUI() {
  /* Como vemos aquí AppUI es el unico componente que hace un llamado
	al React.context() */
  const {
    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    totalTodos, 
    completedTodos,
    searchValue, 
    setSearchValue  
  } = React.useContext(TodoContext);
	...
}

TOOOOODA esta información la vamos a pasar directamente a nuestro componente App.js.

Para esto eliminamos el return del App.js y eliminamos estos imports:

import { AppUI } from './AppUI';
import { TodoProvider } from '../Components/TodoContext/TodoContext';

Nos vamos a traer todo lo que está dentro de nuestro AppUI.js y lo vamos a pegar en nuestro App.js:

import React from 'react';
import { TodoCounter } from '../Components/TodoCounter/TodoCounter';
import { TodoSearch } from '../Components/TodoSearch/TodoSearch';
import { TodoList } from '../Components/TodoList/TodoList';
import { TodoItem } from "../Components/TodoItem/TodoItem";
import { TodoForm } from "../Components/TodoForm/TodoForm";
import { CreateTodoButton } from '../Components/CreateTodoButton/CreateTodoButton';
import { Modal } from "../Components/Modal/Modal";

function App() {
  const {
    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    totalTodos, 
    completedTodos,
    searchValue, 
    setSearchValue  
  } = React.useContext(TodoContext);

  return (
    <React.Fragment>
      <TodoCounter 
        totalTodos={totalTodos}
        completedTodos={completedTodos}
      />
      <TodoSearch 
        searchValue={searchValue}
        setSearchValue={setSearchValue}
      />

      <TodoList>
        {error && <p>Desespérate, hubo un error...</p>}
        {loading && <p>Estamos cargando, no desesperes...</p>}
        {(!loading && !searchedTodos.length) && <p>¡Crea tu primer TODO!</p>}
        
        {searchedTodos.map(todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        ))}
      </TodoList>

      {!!openModal && (
        <Modal>
          <TodoForm />
        </Modal>
      )}

      <CreateTodoButton 
        setOpenModal={setOpenModal}
      />
    </React.Fragment>
  );;
}

export default App;

Gracias a esto podemos directamente eliminar AppUi.js

Ahora solo nos queda arreglar lo del useContext(), para esto utilizaremos un custom hook, específicamente crearemos ahora un hook reemplazando a TodoProvider por useTodos que será nuestro hook.

En este reemplazaremos el componente que estábamos retornando, por un objeto el cual tendrá todas las propiedades que necesitemos:

import React from "react";
import { useLocalStorage } from "../useLocalStorage/useLocalSorage";

function useTodos() {
  const {
    item: todos, 
    saveItem: saveTodos, 
    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 = [];

  if(!searchValue.length >= 1) {
    searchedTodos = todos;
  } else {
    searchedTodos = todos.filter(todo => {
      const todoText = todo.text.toLowerCase();
      const searchText = searchValue.toLowerCase();
      return todoText.includes(searchText);
    });
  }

  

  const completeTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos[todoIndex].completed = true;
    saveTodos(newTodos);
  }

  const deleteTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos.splice(todoIndex, 1);
    saveTodos(newTodos);
  }

  const addTodo = (text) => {
    const newTodos = [...todos];
    newTodos.push({
      completed: false,
      text,
    })
    saveTodos(newTodos);
  }

  return {
    loading,
    error,
    totalTodos,
    completedTodos,

    searchValue, 
    setSearchValue,

    searchedTodos,
    completeTodo,
    deleteTodo,
    addTodo,

    openModal,
    setOpenModal,
  }
}

export { useTodos }

siguiendo la lógica de nuestra aplicación, este archivo lo tendremos que renombrar como useTodos, y enviarlo donde esta ubicado nuestro App.js porque como tal no es un componente.

Haremos lo mismo con el useLocalStorage porque tampoco es un componente.

En nuestro archivo App.js vamos a importar nuestro custom hook:

...
import { useTodos } from './useTodos';
...

Ahora si vamos a arreglar lo del useContext cambiandolo por nuestro custom hook:

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

Ahora solo debemos arreglar nuestro TodoForm.js

Vamos a cambiar nuestro TodoForm para que ahora reciba las propiedades del useTodos.

/* Esto lo hacemos recibiendo a estos dos como valores de el 
objeto que retorna useTodos */

// De paso eliminamos el llamado a useContext

function TodoForm({ addTodo, setOpenModal }) {
  ...
]

Ahora en nuestro App.js vamos a enviar nuestro addTodo.

function App() {
  const {
    ...
    addTodo,
  } = useTodos();

Y vamos a enviar esta propiedad a nuestro Formulario en nuestro return.

return (
	    ...
      {!!openModal && (
        <Modal>
          <TodoForm 
						addTodo={addTodo}
            setOpenModal={setOpenModal}
					/>
        </Modal>
      )}
			...
}

Y listos 😎. Ya tenemos un código que es muchísimo más legible y menos complejo, aparte evitamos usar React.useContext() usando la composición de componentes.

Comentarios (42)42 comentarios

Luis E. Gama Ramirez

Hace 5 años

Reinaldo Mendoza

Felipe Quiceno Gomez

Mario Estanislao César Ariet

Juan Castro

Profesor

Edgar Oliveros

Hace 3 años

Jhon Jairo Trillos Alvarez

Julian David Toro Medina

Obed Paz

Johangly Sucre

Alexandro Jiménez

Jhon Eduard Bocanegra Ortiz

Huáscar Suárez Chávez

Jessica Andrea Aquino Torrez

Kevin Daniel Hincapie Lumbaque

Fernando Orozco Velasquez

Alejandro Ivan Mendieta

ZANONI ALFREDO SALAS TOBÓN

Alessandra Amicarella

Iván Rodríguez

Harold Zurita Simon

Lenin Garizabalo

Pedro Alvarado Garcia

Roberto Enrique Ajuchan Lopez

Luis Lazcano

Hace 9 meses

Ares Miro Serra

Ismael Cruz Procel

Luis Evelio Garcia Rodriguez

Jhean Pacheco

Xamir E Rojas

Enmanuel Josue Sarmiento Benitez

Daniel Morales

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Eliminación de React Context mediante Custom Hooks en React

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos