Eliminación de React Context mediante Custom Hooks en React

Clase 7 de 19 • Curso de React.js: Patrones de Render y Composición

Clase anteriorSiguiente clase

Luis E. Gama Ramirez

student•

Reinaldo Mendoza

student•

jaja, calma, cada cosa tiene su uso

Felipe Quiceno Gomez

student•

En aplicaciones pequeñas si muere, pero cuando trabajamos en un proyecto grande si requerimos de todos los poderes jeje

Mario Estanislao César Ariet

student•

Tengo un proyecto personal en el que había atomizado y encapsulado todo de tal manera que cada archivo .js hacia solo una cosa y llamaba solamente a sus hijos (lo cual me da mucha seguridad al querer cambiar un comportamiento o interacción). Pero sentía que no me quedaba algo "DECLARATIVO". Usando composición de componentes cambió el proyecto completamente!!!! Mi sensación: antes ver mi código era como "leer un libro que tenía una palabra por página y había que dar la vuelta a la hoja a cada rato", muy incomodo y sin flow. Ahora parece una página de wikipedia que describe globalmente mi aplicación y con los enlaces para seguir profundizando (los imports) 😅😅😅😅 Ahora sí siento más declarativo a mi react. Gracias Juan

Juan Castro

teacher•

¡Yei! ¡Qué maravilla! Me alegra muchísimo que te haya ayudado la composición de componentes. :green_heart:

Edgar Oliveros

student•

uff totalmente, que buen ejemplo el de la wikipedia, me paso lo mismo con un proyecto en js modular, como que no aprovechaba bien lo de ser modular, apenas aqui estoy entendiendo como funciona

Jhon Jairo Trillos Alvarez

student•

Así vamos hasta este punto 🥶

Todo-Machine

Cosillas nuevas: ID únicos para las tareas Modo dark y light UI creo que agradable y minimalista Algo de responsive

Cualquier comentario y/o consejo bienvenido 😁

Juan Castro

teacher•

Cosa bella. Cosa hermosa. Cosa bien hecha.

Julian David Toro Medina

student•

Full de acuerdo, está muy chévere 👍

Obed Paz

student•

Ahora entiendo porque la propiedad children era su favorita :v Nos lo habia advertido desde el primer curso jajaja

Johangly Sucre

student•

SIiiiiiii ajsaksjaksj

Alexandro Jiménez

student•

El curso de introducción me explotó la cabeza, mis proyectos en react eran un desastre no podía ni darle mantenimiento yo mismo, gracias al curso de introducción un proyecto de mi trabajo quedó súper bien y ahora con composición me siento más confiado y seguro de lo que hago, eres un gran maestro Juan!. Sigue así nunca pares de enseñar. :D

Reinaldo Mendoza

student•

Genio!!!

Jhon Eduard Bocanegra Ortiz

student•

que gran noticia bro.

Huáscar Suárez Chávez

student•

Muchas gracias, me siento mucho más seguro con React. El curso de introducción me dejo con cierta incertidumbre sobre como escalaria el proyecto solamente con props, pero esto de la composición es sin duda un salva vidas! Gracias David!

Jessica Andrea Aquino Torrez

student•

La composición de componentes es genial 😎

Andrés Esteban Rodríguez Jiménez

student•

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.

Kevin Daniel Hincapie Lumbaque

student•

Estuve dos horas buscando un error... eran los paréntesis de useTodos que olvide ponerlos... >__<

Fernando Orozco Velasquez

student•

Me paso justamente los mismo! ha este punto ya me acostumbre a que me salgan errores y solo es cuestión de leer Track de errores jeje

Alejandro Ivan Mendieta

student•

Este curso me daba miedo el no entender, pero hasta ahora me está gustando mucho.

ZANONI ALFREDO SALAS TOBÓN

student•

Pregunta ¿useLocalStorange y useTodos son hooks? Pues los he estado tratando como tal y los tengo en una carpeta de hooks, pero viendo esta clase, comencé a dudar que es hooks..!

Alessandra Amicarella

student•

Si, ambos son hooks. El profesor en una de las clases dijo que para el proyecto no habria problema en tener los hooks en la misma carpeta del component App ya que solamente se usaran desde ahi. Pero ya es gusto de cada desarrollador la organizacion de las carpetas y archivos

Iván Rodríguez

student•

Yo personalmente tengo mi carpeta de "customHooks" y ahí los dejo, no los pongo en App. Me parece más arreglado así y no me vuelvo tan loco buscando después xd

Harold Zurita Simon

student•

Composición de componentes sin React Context

. A un principio teníamos la aplicación dividida de en App y AppUI. .

function App() {
  return (
    <TodoProvider>
      <AppUI />
    </TodoProvider>
  );
}

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

	return (
		<>
			<header>
				<TodoCounter 
					totalTodos={totalTodos}
					completedTodos={completedTodos}
				/>
	      <TodoSearch
					searchValue={searchValue}
					setSearchValue={setSearchValue} 
				/>
			</header>
		</>
	);
}

. Pero nos damos cuenta que utilizar React Context es innecesario, debido a que solo estaríamos pasando información de App a AppUI. Por lo cual, decidimos eliminar el componente AppUI y mover su información al componente App. .

function App() {
  const {
    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    totalTodos,
    completedTodos,
    searchValue,
    setSearchValue,
  } = useTodos();
  
  return (
    <>
			<header>
				<TodoCounter 
					totalTodos={totalTodos}
					completedTodos={completedTodos}
				/>
	      <TodoSearch
					searchValue={searchValue}
					setSearchValue={setSearchValue} 
				/>
			</header>
			...
		</>
  );
}

. Entre lo más destacable en el componente App se pasó la estructura de AppUI, debido a que ya no se utilizará React Context se va a sustituir a React.useContext(TodoContext) por el custom hook useTodos. . Además se eliminó el archivo AppUI.js y se renombró el provider TodoProvider por el custom hook useTodos con el nombre del archivo 'useTodos.js'. Finalmente useTodos.js y useLocalStorage.js se movieron dentro de la carpeta App modificando también todas las rutas de importaciones pertinentes. .

function TodoProvider(props) {
  
	...
  
  return (
    <TodoContext.Provider value={{
      loading,
      error,
      totalTodos,
      completedTodos,
      searchValue,
      setSearchValue,
      searchedTodos,
      addTodo,
      completeTodo,
      deleteTodo,
      openModal,
      setOpenModal,
    }}>
      {props.children}
    </TodoContext.Provider>
  );
}

export { TodoContext, TodoProvider };

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

export { useTodos };

. Podemos notar que la diferencia que hay entre el cambio que hicimos a TodoProvider con el custom hook useTodos radica en: .

Cambio del nombre del componente y eliminación del parámetro props.
Se substituye el return del componente provider, en su lugar retornamos un objeto con la información que el provider guardaba en su propiedad value.
Ya no exportamos { TodoContext, TodoProvider } sino que solo el custom hook { useTodos }.

. Finalmente, nos dimos cuenta que el componente TodoForm seguía utilizando el provider. .

function TodoForm() {
  const {
    addTodo,
    setOpenModal,
  } = React.useContext(TodoContext);

  return (
    <form onSubmit={onSubmit}>
      ...
    </form>
  );
}

. Por lo que se elimina el uso de React Context pasando las propiedades pertinentes como parámetros, se modifica el componente App agregando dichas propiedades (en este caso solo faltaba agregar addTodo) a las que recibimos de useTodos y pasamos esa información al componente TodoForm desde el componente principal App. .

function TodoForm({ addTodo, setOpenModal }) {

  return (
    <form onSubmit={onSubmit}>
      ...
    </form>
  );
}

function App() {
  const {
    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    totalTodos,
    completedTodos,
    searchValue,
    setSearchValue,
    addTodo,
  } = useTodos();
  
  return (
    <>
			...
			{!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )}
			...
		</>
  );
}

. Gracias a estos cambios logramos bajar la complejidad de la aplicación!.

Lenin Garizabalo

student•

WAO!!, casi un año con React y ni idea de esto. ¡Gracias platzi, gracias juan! ¡Aprendí un montón!

Pedro Alvarado Garcia

student•

Pobre React Context. Destrozado en segundos.

Roberto Enrique Ajuchan Lopez

student•

Me he quedado sorprendido eh, esto es lo maximo.

Ares Miro Serra

student•

No he entendido muy bien cuando usaríamos React Context y cuando usaríamos composición de componentes.

No representa si usamos el child el en header no se podría reutilizar el componente y mismo en todos los componentes con los que usamos child?

Ismael Cruz Procel

student•

Utilizar React context no debería eximirse de hacer una buena composición de componentes, en muchos casos esto bastara para una correcta comunicación entre los mismos, pero en aplicaciones más grandes probablemente necesitarás implementar context cuando necesites compartir datos globales en la aplicación que son necesarios en varios componentes en diferentes niveles de la jerarquía.

Luis Evelio Garcia Rodriguez

student•

mmm bueno en estos ejemplos esta claro, pero me nace una duda, voy a poner un ejemplo tengo la siguiente estructura de carpetas; src

modules -- TaskControl --- FormSaveTask ---- UiFormSaveTask.js ---- useSaveTask.js --- TasksList ---- UiCard.js ---- useCardList.js
app.js

con esta base digamos lo siguiente, en app.js tengo un idUser que es el id del usuario que trabaja actualmente en el aplicativo. Tengo un UiFormSaveTask.js que es donde tengo como su nombre lo dice la vista del formulario y un useSaveTask.js que es donde tengo toda la lógica incluyendo las validaciones del formulario, los llamados al api y etc... En app.js yo llamo <UiFormSaveTask/> como esta el ejemplo de la clase de hoy, aca es donde viene la pregunta: como puedo yo obtener ese idUser.js pero dentro de useSaveTask.js para cuando yo haga el post al api allí pueda enviar el id del usuario que registro esa tarea....

Espero ser claro con el ejemplo, quedo atento gracias

Jhean Pacheco

student•

No se si entendí muy bien tu pregunta pero creo que una solución sería pasar como props el idUser a UiFormSaveTask presente en la composición y luego dentro de este pasar ese idUser como parámetro del CustomHook useSaveTask. Espero haberte ayudado.

Xamir E Rojas

student•

WOW 🤯 Justamente estaba inconforme en el proyecto en el que me encuentro porque no me gustaba el tener varios contextos en mi App.js para manejar la información de unos ítems que se usan a través de algunas de las rutas/páginas de mi proyecto y la manera en que creas el custom hook para reemplazar el contexto me abrió la mente a muchas posibilidades!!!.

Entonces me surgen las dudas ¿Qué criterios tienes en cuenta a la hora de decidir entre hacer un custom hook y crear un contexto? ¿Tienes en cuenta el número de rutas que comparten información o es más acerca de los tataranietos que puedan necesitar dicha información?

Juan Castro

teacher•

:one: ¿Qué criterios tienes en cuenta a la hora de decidir entre hacer un custom hook y crear un contexto? . Con React Context podemos compartir un mismo estado entre varios componentes. . Con un Custom Hook podemos compartir una misma lógica para manejar el estado, pero cuando lo llamemos desde varios componentes no estaremos compartiendo el mismo estado, sino creando diferentes estados (que funcionan exactamente igual, pero al fin y al cabo son estados independientes). ... :two: ¿Tienes en cuenta el número de rutas que comparten información o es más acerca de los tataranietos que puedan necesitar dicha información? . Yo creo que hay que tener en cuenta ambas. . Si usamos herramientas como React Router y necesitamos información compartida entre varias rutas, automáticamente voy a usar React Context. . Pero también voy a tener muy en cuenta la cantidad de componentes hacia abajo que haya en nuestra aplicación, incluso si viven dentro de una sola ruta.

Enmanuel Josue Sarmiento Benitez

student•

Tengo el siguiente error

Enmanuel Josue Sarmiento Benitez

student•

era porque el return estaba en () y no en {} en el useTodos.js

Daniel Morales

student•

Creo que todos estamos igual, ahora entendemos más nuestra aplicación y podemos probar todo lo que queramos. Excelente clase!

Ramiro Godoy

student•

Me gusta mucho este concepto de composición de componentes, es como que todo, o casi todo lo tienes en un archivo, y se facilita la lectura