¿Qué es React Context?

Resumen

React Context es una característica poderosa de React que permite manejar estados globales y facilita la comunicación entre componentes, eliminando el tedioso proceso de prop-drilling, el cual consiste en pasar datos a través de una cascada de componentes. Este patrón puede llevar a un código difícil de gestionar, especialmente en aplicaciones grandes. A continuación, exploraremos cómo React Context transforma el flujo de datos en nuestras aplicaciones y cómo implementarlo para mantener una arquitectura limpia y eficiente.

¿qué es prop drilling y cómo lo soluciona React Context?

El prop drilling es el proceso de pasar datos de un componente a otro a través del árbol de componentes mediante props, lo cual puede complicarse en aplicaciones grandes. React Context soluciona esto permitiendo que cualquier componente acceda a los datos del estado global sin necesidad de pasárselos explícitamente.

¿cómo estructuramos los componentes en React?

Generalmente, los componentes en React se estructuran en jerarquías, con componentes padres que encapsulan a otros hijos. Esta estructura puede complicar la comunicación entre componentes que están en diferentes niveles. Con React Context, podemos imaginar los componentes como entidades independientes que se comunican directamente con un estado global, lo cual simplifica mucho la estructura.

Implementación básica de React Context

Creación del contexto: Utilizamos React.createContext para crear un nuevo contexto.
Provider y Consumer: El contexto brinda dos componentes: Provider para proveer el estado a los componentes descendientes, y Consumer para acceder a dicho estado.
Uso de Context en componentes: Los componentes pueden consumir el estado mediante Consumer o el Hook useContext para acceder a los datos proporcionados por Provider.

Pasos para implementar React Context en nuestra aplicación

Crear un archivo TodoContext.js para definir el contexto.
Utilizar React.createContext() para crear una instancia del contexto.
Exportar el Provider y el Consumer para su uso en otros componentes.
Encapsular la lógica y el estado global dentro de un Provider personalizado.
Utilizar el Provider para envolver la parte de la aplicación que necesite acceso al contexto.
Acceder al estado global en los componentes hijos mediante Consumer o el Hook useContext.

Utilizando el Provider personalizado

El Provider personalizado permite centralizar y gestionar el estado global y la lógica asociada. Se envuelve la aplicación o los componentes que requieran acceso al contexto con este Provider personalizado, lo que hace que el contexto esté disponible en toda su descendencia.

Conexión de componentes con el contexto global

Los componentes se pueden conectar con el contexto global utilizando el Consumer o el Hook useContext, lo que les permite suscribirse a los cambios del contexto y acceder a los datos necesarios sin la necesidad de recibir props.

Beneficios de utilizar React Context

Simplificación del flujo de datos: Se elimina la necesidad de pasar props entre muchos niveles.
Mantenibilidad: El código es más fácil de mantener y actualizar.
Componentes reutilizables: Los componentes se vuelven más reutilizables al no depender de una estructura específica de componentes.
Separación de responsabilidades: La lógica del estado se maneja en un solo lugar, separado de la interfaz de usuario.

Próximos pasos para resolver problemas con React Context

En la siguiente sección de nuestro estudio sobre React Context, abordaremos cómo solucionar los problemas que pueden surgir al utilizar el contexto, especialmente cuando ciertos componentes aún no funcionan correctamente después de implementar el contexto. Exploraremos herramientas y métodos adicionales que facilitan el consumo de información del contexto de una manera más cómoda y eficiente.

El uso de React Context puede representar un cambio significativo en la forma en que manejamos el estado y la lógica en nuestras aplicaciones de React. Invito a todos los estudiantes a explorar este tema en profundidad y a practicar la implementación de React Context en proyectos de ejemplo para consolidar su comprensión. ¡Ánimo en este viaje de aprendizaje hacia un código más limpio y eficiente!

Brandon Manzo

student•

Recién tuve una entrevista con esa información. Es muy importante ver los términos ya que es algo que se ve comúnmente en react:

Prop Drilling: es una paso del desarrollo que ocurre cuando necesitamos obtener datos que están en varias capas en el árbol de componentes React.

Este se ve siempre cuando pasamos props entre hijos, luego ese a otros hijos y así sucesivamente... la solución es usar context:

Context: es un elemento que podemos crear en React para establecer una comunicación directa entre un componente en un nivel muy alto y uno en un nivel mucho más bajo.

Por ende context permite acceder a los valores de forma directa.

Ivo Konstantinow

student•

Gracias por compartir tu experiencia!

Henry Alexander Velásquez Rosas

student•

✨ React Context vs 💀 Props Drilling

Jaime Ramón Santillán Martínez

student•

Muy bien explicado con una sola imagen. Gracias!

Esteban Augusto Colmenares Blanco

student•

React Context es como una nube donde puedes almacenar funcionalidades, estados, datos, etc. Que necesitan ser compartidos entre diferentes componentes de una aplicación. Digamos que existen varios componentes que necesitan acceder a un mismo estado, como por ejemplo, un estado de carga en lugar de pasar estos datos a través de múltiples niveles de componentes, que conducen al Prop Drilling siendo un patrón que puede ser útil en algunas situaciones, pero también puede resultar incómodo y difícil de mantener si hay muchos niveles de componentes intermedios involucrados. Además, puede hacer que el código sea menos legible y más propenso a errores.

Por ello React Context es una buena solución y acceder a ellos fácilmente desde cualquier lugar de la aplicación. Por ello, otra manera de verlo es como una biblioteca compartida. Imagina que trabajas en una empresa y necesitas compartir una biblioteca de recursos (libros, revistas, etc.) con tus compañeros de trabajo. En lugar de pasar los libros de mano en mano entre los compañeros de trabajo, puedes ponerlos todos en una biblioteca compartida en el edificio de la empresa o en englobarlos en un Google Drive, lo que hace que sea más fácil para todos acceder a los recursos que necesitan.

De manera similar, con React Context, puedes guardar datos que necesitan ser compartidos entre diferentes componentes de tu aplicación en una "biblioteca compartida" (el contexto de React), lo que facilita el acceso a estos datos desde cualquier lugar de tu aplicación sin tener que pasarlos manualmente a través de múltiples niveles de componentes.

Juan David Vanegas Roldán

student•

A ver, yo creo que hubiera sido mejor abordar los aspectos conceptuales y teóricos de react y al final hacer la aplicación. La verdad a estas alturas del curso ya estoy simplemente muy perdido con esa app.

Juan Manuel Balaguera Alvira

student•

El "prop drilling" (también conocido como "props drilling") es un patrón o fenómeno que ocurre en React cuando se pasa una propiedad (prop) a través de múltiples niveles de componentes, aunque los componentes intermedios no necesiten esa propiedad en particular.

En una estructura de componentes anidados, cuando un componente necesita acceder a una prop que se encuentra en un componente padre o abuelo, debe recibir dicha prop como un parámetro y luego pasarla a través de sus propios props a los componentes hijos. A medida que se agregan más componentes en la cadena, este proceso se repite, lo que resulta en un "túnel" o "perforación" de props a través de múltiples niveles de componentes.

El prop drilling puede ocurrir cuando no se utiliza una solución de gestión de estado más avanzada, como Context API o Redux, y se pasa información a través de las props en lugar de compartirla de manera más directa entre los componentes.

El prop drilling puede tener algunas desventajas, como hacer que el código sea más complejo y difícil de mantener, ya que las props deben pasar por varios componentes intermedios incluso si no se utilizan en ellos. También puede dificultar los cambios en la estructura de los componentes, ya que cualquier cambio en la prop que se está pasando requerirá modificar todos los componentes que forman parte del "túnel" de props.

Sin embargo, el prop drilling puede ser una solución adecuada en situaciones simples y pequeñas, y no siempre es problemático. En proyectos más grandes y complejos, se recomienda considerar el uso de patrones de gestión de estado más avanzados, como Context API o Redux, para evitar el prop drilling excesivo y mejorar la eficiencia y la escalabilidad del código.

Raycris Maldonado

student•

Ésta clase es excelente, recomiendo que las vean las veces que sean necesarias para que puedan tener una mejor idea de lo que es React context. Tuve un mejor concepto de como funciona Context después de aquí.

Pero a la misma vez me surge la pregunta, dentro del archivo TodoContext, siempre vamos a tener toda la lógica de nuestro proyecto, como llamados a API, respuestas de las mismas, no sé una lista de productod que necesitamos saber por toda la aplicación y cualquier otra cosa?

Diego Reyes Cabrera

student•

@andrescar18 a dónde tan basado?

Daniel Carpio Robles

student•

Que sufrimiento esta clase!!😔

Alfonso José Chavarro Cortes

student•

Context permite compartir datos entre componentes. Para crear el contexto es necesario el método

createContext()

Existen dos componentes en el contexto: Provider y Consumer. El Provider es el componente que almacena y proporciona el valor, mientras que el Consumer es el componente que permite consumir los datos.

Existen dos formas de acceder al valor del Provider:

Usando el hook useContext()
Usando el componente Consumer.

Fernando Moyano

student•

Dale like si consideras que esta sección de comentarios debería poder esconderse y aparecer a gusto del usuario.

considero que son super útiles pero por momentos interrumpen el foco de concentración del video principal.

Max Andy Diaz Neyra

student•

Aqui les dejo mi código para los valientes que trabajan el proyecto en TS:

import { FC } from 'react'
import { AppUI } from './AppUI'
import { TodoProvider } from '../TodoContext'

const App:FC = () => {

  return (
    <TodoProvider>
      <AppUI /> 
    </TodoProvider>
  )
}



export default App

import { Dispatch, FC, ReactNode, SetStateAction, createContext, useState } from "react";
import { useLocalStorege } from "./useLocalStorage";

export interface ITodo {
    text:string,
    completed:boolean
  }

interface Props {
    children: ReactNode
}

interface GlobalState {
    searchedTodos: ITodo[]
    completedTodos: number,
    totalTodos: number,
    searchValue: string,
    setSearchValue: Dispatch<SetStateAction<string>>
    completeTodo: (v:string)=>void,
    deleteTodo: (v:string)=>void,
    loading: boolean,
    error: boolean
}

const TodoContext = createContext<GlobalState>({} as GlobalState);

const TodoProvider:FC<Props> = ({
    children
}) => {

    const {
        item: todos,
        saveTodos,
        loading,
        error,
      } = useLocalStorege<ITodo[]>('TODOS_V1', []);
    
      const completedTodos:number = todos.filter(todo=>todo.completed).length;
      const totalTodos:number = todos.length;
      const [searchValue, setSearchValue] = useState<string>('');
    
      const searchedTodos = todos.filter(todo=> todo.text.toLowerCase().includes(searchValue.toLowerCase()));
    
      const completeTodo = (text: string) =>{
        const newTodos = todos.map(todo=>{
          if(todo.text === text) todo.completed = !todo.completed;
          return todo;
        })
        saveTodos(newTodos);
      }
    
      const deleteTodo = (text: string) => {
        const newTodos = todos.filter(todo=>todo.text !== text);
        saveTodos(newTodos);
      }

    return (
        <TodoContext.Provider value={{
            searchedTodos,
            completedTodos,
            totalTodos,
            searchValue,
            setSearchValue,
            completeTodo,
            deleteTodo,
            loading,
            error
        }}>
            {children}
        </TodoContext.Provider>
    )
}

export { TodoContext, TodoProvider }

import { useEffect, useState } from "react";

const useLocalStorege = <T,>(itemName:string, initialValue:T) => {

    const [item, setItem] = useState<T>(initialValue);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            try {
                const localStorageTodos = localStorage.getItem(itemName);
                let parsedItem:T;
                if(!localStorageTodos){
                    localStorage.setItem(itemName, JSON.stringify(initialValue))
                    parsedItem = initialValue
                } else {
                    parsedItem = JSON.parse(localStorageTodos) as T;
                }
                saveTodos(parsedItem);
                setLoading(false);    
            } catch (err) {
                setError(true);
            }
        }, 2000);
    }, [])
    
    const saveTodos = (newTodos:T) => {
        setItem(newTodos);
        localStorage.setItem(itemName, JSON.stringify(newTodos))
    }

    return {
        item,
        saveTodos,
        loading,
        error,
    }

}

export { useLocalStorege }

import { FC } from "react"
import { TodoButton } from "../TodoButton"
import { TodoCounter } from "../TodoCounter"
import { TodoItem } from "../TodoItem"
import { TodoList } from "../TodoList"
import { TodoSearch } from "../TodoSearch"
import { TodosError } from "../TodoError"
import { EmptyTodos } from "../EmptyTodo"
import { TodosLoading } from "../TodoLoading"
import { TodoContext } from "../TodoContext"

// interface Props {
//     searchedTodos: ITodo[]
//     completedTodos: number,
//     totalTodos: number,
//     searchValue: string,
//     setSearchValue: Dispatch<SetStateAction<string>>
//     completeTodo: (v:string)=>void,
//     deleteTodo: (v:string)=>void,
//     loading: boolean,
//     error: boolean
// }

export const AppUI:FC = () => {
  return (
    <>
      <TodoCounter />
      <TodoSearch  />
      {
        <TodoContext.Consumer>
          {({
              searchedTodos,
              completeTodo,
              deleteTodo,
              loading,
              error
          })=>(
            <TodoList>
              {loading && (
                <>
                  <TodosLoading />
                  <TodosLoading />
                  <TodosLoading />
                </>
              )}
              {error && <TodosError />}
              {(!loading && searchedTodos.length === 0) && <EmptyTodos />}
              {
                searchedTodos.map(todo=>(
                  <TodoItem
                    key={todo.text}
                    text={todo.text}
                    completed={todo.completed}
                    onComplete={()=>{completeTodo(todo.text)}}
                    onDelete={()=>{deleteTodo(todo.text)}}
                  />
                ))
              }
            </TodoList>

          )}
        </TodoContext.Consumer>
      }
      <TodoButton />
    </>
  )
}

Camilo Taborda

student•

Que tal TS ?

Marcelo Vinicio Chavarría Ugalde

student•

TypeScript es un lenguaje de programación súper cool que potencia tus desarrollos al ser más seguro y a prueba de errores en comparación con JavaScript. En resumen, TypeScript se destaca por su tipado estático, capacidad para detectar errores en tiempo de compilación, características avanzadas de tipado y OOP, mientras que JavaScript es más flexible pero puede resultar en errores más difíciles de identificar durante la ejecución.

Aquí te paso documentación https://www.typescriptlang.org/docs/
Aquí te paso un buen video de qué es Ts https://youtu.be/xtp_DuPxo9Q

Jesus Nicolas Vite

student•

Pude arrreglar un error, por mi cuenta leyendo toda la información en inglés!!!

Marcelo Vinicio Chavarría Ugalde

student•

Cool 😎 Pasa esa documentación xd

Frank Sepúlveda

student•

React sera muy famoso, pero la verdad es un caos escribir el codigo.

Angel Bernechea

student•

Nunca antes había estado tan feliz de saber git antes de una clase. Me tomó como 3 horas y 5 ramas poder hacerlo sin quemar troyanos. En serio, sudé mis sesos en esta clase

Carlos Esteban León Pinilla

student•

Super cool esto de React Context, esto ya estaba antes de Redux o fue después que salió?

Juan Castro

teacher•

Creo que esta lectura puede aclarar un poco esa duda: https://platzi.com/blog/redux-no-esta-muerto/

Diego Eduardo Téllez Contreras

student•

Hace poco estuve trabajando con Redux para crear estados globales y sin duda, es mucho más facil hacerlo con React Context. Profe Juan, cómo se cuales son las diferencias entre estos dos metodos y cuando debo usar cada uno?

Juan Castro

teacher•

Mira: https://platzi.com/blog/redux-no-esta-muerto/

Diego Eduardo Téllez Contreras

student•

Gracias profe

David Saavedra Vázquez

student•

En 2 mins explicación de Context:

Diego J. Ojeda

student•

Las explicaciones de Juan DC me dejan así 🤯 de lo fácil que hace entender los conceptos

Ricardo Alfonso Chavez Vilcapoma

student•

No entendí un poco el sentido de Provider y Consumer...si alguien puede ayudarme sería bueno. Gracias.

Juan Castro

teacher•

Poder transmitir información de un componente a otro sin necesidad de pasar por promps entre cada componente intermedio

Ricardo Alfonso Chavez Vilcapoma

student•

Gracias profesor...al final si pude entender cómo funciona ello luego de salir a tomar aire fresco 😅.

Mauricio Combariza

student•

Cuando uno decidio escribir todo con TS y en este momento todo el codigo esta en rojo, dan ganas de sentarse a llorar.

Henry Alexander Velásquez Rosas

student•

¿Cómo vas con eso 🤠? ¿Lograste salir de ese estancamiento?

Jose Julian Fuentes

student•

Cuando retorno el provider desde un componente lo exporto y lo utilizo en el componente App no renderiza nada pero cuando lo hago desde un función si renderiza, alguien sabe por qué pasa eso?

Platzi

student•

Es posible que haya un problema con la forma en que estás exportando e importando el provider. Verifica que estés importando correctamente el provider en el componente App y que estés pasando las propiedades necesarias. También asegúrate de que el componente App esté renderizando correctamente el contenido del provider.

Jorge Andres Gomez Severiche

student•

pudiste solucionar ?, tengo el mismo problema.

import { FC } from 'react'
import { AppUI } from './AppUI'
import { TodoProvider } from '../TodoContext'

const App:FC = () => {

  return (
    <TodoProvider>
      <AppUI /> 
    </TodoProvider>
  )
}



export default App

import { Dispatch, FC, ReactNode, SetStateAction, createContext, useState } from "react";
import { useLocalStorege } from "./useLocalStorage";

export interface ITodo {
    text:string,
    completed:boolean
  }

interface Props {
    children: ReactNode
}

interface GlobalState {
    searchedTodos: ITodo[]
    completedTodos: number,
    totalTodos: number,
    searchValue: string,
    setSearchValue: Dispatch<SetStateAction<string>>
    completeTodo: (v:string)=>void,
    deleteTodo: (v:string)=>void,
    loading: boolean,
    error: boolean
}

const TodoContext = createContext<GlobalState>({} as GlobalState);

const TodoProvider:FC<Props> = ({
    children
}) => {

    const {
        item: todos,
        saveTodos,
        loading,
        error,
      } = useLocalStorege<ITodo[]>('TODOS_V1', []);
    
      const completedTodos:number = todos.filter(todo=>todo.completed).length;
      const totalTodos:number = todos.length;
      const [searchValue, setSearchValue] = useState<string>('');
    
      const searchedTodos = todos.filter(todo=> todo.text.toLowerCase().includes(searchValue.toLowerCase()));
    
      const completeTodo = (text: string) =>{
        const newTodos = todos.map(todo=>{
          if(todo.text === text) todo.completed = !todo.completed;
          return todo;
        })
        saveTodos(newTodos);
      }
    
      const deleteTodo = (text: string) => {
        const newTodos = todos.filter(todo=>todo.text !== text);
        saveTodos(newTodos);
      }

    return (
        <TodoContext.Provider value={{
            searchedTodos,
            completedTodos,
            totalTodos,
            searchValue,
            setSearchValue,
            completeTodo,
            deleteTodo,
            loading,
            error
        }}>
            {children}
        </TodoContext.Provider>
    )
}

export { TodoContext, TodoProvider }

import { useEffect, useState } from "react";

const useLocalStorege = <T,>(itemName:string, initialValue:T) => {

    const [item, setItem] = useState<T>(initialValue);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            try {
                const localStorageTodos = localStorage.getItem(itemName);
                let parsedItem:T;
                if(!localStorageTodos){
                    localStorage.setItem(itemName, JSON.stringify(initialValue))
                    parsedItem = initialValue
                } else {
                    parsedItem = JSON.parse(localStorageTodos) as T;
                }
                saveTodos(parsedItem);
                setLoading(false);    
            } catch (err) {
                setError(true);
            }
        }, 2000);
    }, [])
    
    const saveTodos = (newTodos:T) => {
        setItem(newTodos);
        localStorage.setItem(itemName, JSON.stringify(newTodos))
    }

    return {
        item,
        saveTodos,
        loading,
        error,
    }

}

export { useLocalStorege }

import { FC } from "react"
import { TodoButton } from "../TodoButton"
import { TodoCounter } from "../TodoCounter"
import { TodoItem } from "../TodoItem"
import { TodoList } from "../TodoList"
import { TodoSearch } from "../TodoSearch"
import { TodosError } from "../TodoError"
import { EmptyTodos } from "../EmptyTodo"
import { TodosLoading } from "../TodoLoading"
import { TodoContext } from "../TodoContext"

// interface Props {
//     searchedTodos: ITodo[]
//     completedTodos: number,
//     totalTodos: number,
//     searchValue: string,
//     setSearchValue: Dispatch<SetStateAction<string>>
//     completeTodo: (v:string)=>void,
//     deleteTodo: (v:string)=>void,
//     loading: boolean,
//     error: boolean
// }

export const AppUI:FC = () => {
  return (
    <>
      <TodoCounter />
      <TodoSearch  />
      {
        <TodoContext.Consumer>
          {({
              searchedTodos,
              completeTodo,
              deleteTodo,
              loading,
              error
          })=>(
            <TodoList>
              {loading && (
                <>
                  <TodosLoading />
                  <TodosLoading />
                  <TodosLoading />
                </>
              )}
              {error && <TodosError />}
              {(!loading && searchedTodos.length === 0) && <EmptyTodos />}
              {
                searchedTodos.map(todo=>(
                  <TodoItem
                    key={todo.text}
                    text={todo.text}
                    completed={todo.completed}
                    onComplete={()=>{completeTodo(todo.text)}}
                    onDelete={()=>{deleteTodo(todo.text)}}
                  />
                ))
              }
            </TodoList>

          )}
        </TodoContext.Consumer>
      }
      <TodoButton />
    </>
  )
}

¿Qué es React Context?

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js

Eventos en React: onClick, onChange

¿Qué es el estado?

Contando TODOs

Buscando TODOs

Completando y eliminando TODOs

Librería de Iconos Personalizados

Iconos en React: librerías y SVG

Iconos con colores dinámicos

Herramientas avanzadas: escalabilidad, organización y persistencia

Local Storage con React.js

Custom Hooks

Organización de archivos y carpetas

Feature-First Directories en React

Tips para naming y abstracción de componentes React

¿Qué son los efectos en React?

Estados de carga y error

Actualizando estados desde useEffect

Reto: loading skeletons

¿Qué es React Context?

useContext

¿Qué son los React Portals?

Reto: estados para abrir y cerrar un modal

Maquetando formularios en React

Crear TODOs: React Context dentro de React Portals

Deploy

Despliegue de TODO Machine en GitHub Pages

Presentación de proyectos para tu portafolio

Próximos pasos: React #UnderTheHood

Diferencias entre versiones de React.js

¿Cuándo realmente necesitas React.js?

Bonus: creando proyectos en React desde cero

React con Create React App

React con Next.js

React con Vite