Eliminación de React Context mediante Custom Hooks en React

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

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.

Eliminación de React Context mediante Custom Hooks en React

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