useContext

Jonathan Guidi

student•

Al principio me pareció un poco confuso usar TodoContext.Provider, con useContext() es muchisimo más sencillo y legible!

Randy Ochoa

student•

La verdad si, mucho mejor useContenxt

Christian Ramirez

student•

Jonathan, solo por aclarar, siempre usas TodoContext.Provider, tan solo cambias el uso del TodoContext.Consumer por el useContext, pero tienes toda la razón es muchísimo más sencillo.

Pero en la vida profesional si aparecen muchos Context.Consumer

Brayan omar cabrera diez

student•

Según la documentación nueva oficial de React, manifiestan que no es recomendado usar Consumer y que poco a poco empezara a entrar en desuso, Entonces viva, useContext.

SANTIAGO CANO GONZALEZ

student•

Direferncias al usar Context.Consumer con useContext.

Cuando necesitamos pasar los datos establecidos en el Context:

function TodoProvider({children}){
	// Funcionalidades del provider
	return (
    <TodoContext.Provider>
			{children}
		</TodoContext.Provider>
	)
}

La principal diferencia es el uso de TodoContext.Consumer dentro del componente que queramos comunicar con las props. Y el metodo por useContext que no implica pasar como si fuera un componente la sintaxis del Consumer.

Consumer: Acepta una funcion de renderizado:

<TodoContext.Consumer>
	{
		({ props necesarias }) => { // Todos los componentes para pasar las props }
	} 
</TodoContext.Consumer>

useContext: Similar al uso del hook useState solo se declaran las props necesarias dentro del componente.

const { props necesarias } = useContext(TodoContext)

Gracias a esa explicacion de la clase Que es React Context, ahora tiene sentido como se trae el contexto con el hook useContext.

Thomas Alejandro Ferreyra Willemet

student•

Bueno pues en el momento de las clases anteriores donde el profe creo el componente AppUI , pues yo preferi no hacerlo y segui con el app normal metiendo todo ahi.

Esto me llevo a un pequeño problema al querer recrear lo que el profesor hizo en el video.

No podemos usar el provider en el mismo lugar donde vamos a usar el useContext. Me toco ponerlo en el index.js para que luego en el componente App me permitiera usar el use context.

Si le dejaba el provider ahi, pues se rompia todo

Asi que lo elimine de ahi y le deje las <>...</> y ya.

Por si a alguien mas le pasa, pues nada ese es el motivo que no funcione bien

Angel David Velasco Bonifaz

student•

excelente aporte, esto soluciona los errores

Erick Marty Terrazas Zeballos

student•

Yes that`s my case dude, thankS!

Jose Ever Muñoz Muñoz

student•

¿En que momento es más recomendable usar el contexto de la forma de la clase anterior? Se me mucho más sencillo y legible esta manera

Marcelo Vinicio Chavarría Ugalde

student•

Creo que queda a criterio del proyecto en cuestión o del programador como tal.

Zahir La Rosa

student•

Es altamente recomendable utilizar el hook useContext() al comenzar un proyecto desde cero. Sin embargo, en el ámbito laboral, es posible que te encuentres con empresas que han adoptado la práctica de usar <TodoContext.Consumer>. En tales casos, podrías necesitar emplearlo. Esto se debe a que esta es la forma más antigua de trabajar con contextos en versiones anteriores de React.

Recuerda que, aunque useContext() es preferible, siempre es importante adaptarse al ambiente laboral específico y las prácticas existentes en el entorno de desarrollo.

Sebastian Joven

student•

Así solucioné el problema al usar el buscador

{((!loading && totalToDos == 0)) && <p>Crea tu primer Todo</p>}        
{((!loading && searchTodos == 0 && totalToDos > 0)) && <p>No hay coincidencias</p>}

Zahir La Rosa

student•

Gracias. Yo hice básicamente lo mismo.

{(!loading && todosTotal == 0) && <EmptyTodos />}
{(!loading && todosTotal > 0 && searchedTodos.length == 0) && <EmptySearchTodos />}

Tuve que traer todosTotal desde el contexto.

const {
    loading,
    error,
    searchedTodos,
    completarTodo,
    eliminarTodo,
    openModal,
    todosTotal // <- Este no estaba en el video
  } = useContext(TodoContext)

Andrés Julian Caro Restrepo

student•

Les comparto una forma en la que me parece interesante exportar nuestros contexts. Esto sería creando nuestro propio hook para dicho context así:

// useStateContext.js

import React, { createContext, useContext } from "react";

const Context = createContext();

export const StateContext = ({ children }) => {
    // ... Toda nuestra lógica

    return (
        <Context.Provider value={{
            // ... Nuestros valores a exportar
        }}>
            {children}
        </Context.Provider>
    );

}

export const useStateContext = () => useContext(Context);

Como puedes ver, así exportaríamos nuestro StateContext y nuestro useStateContext, el cual ya utiliza el useContext; de esta forma, en los componentes podremos importarlos así:

// TuComponente.js

import { useStateContext } from '../Context/useStateContext';

function TuComponente() {

	const {...tus valores a importar} = useStateContext();

	return(
		<></>
	);

}

Así ya no tendremos que estarle indicando qué contexto queremos usar. Y en caso de tener varios contextos como nos enseña Juan, por ejemplo tener uno para los usuarios, otro para validaciones, ordenes... sería tan sencillo como importar dicho contexto y llamarlos como useUserContext(), useValidationContext(), useOrderContext()... según corresponda. 😀

Jeefry Polo Ospina

student•

Desde la clase anterior cuando implementamos Context mi app se murió :(

Edgardo Luis Jimenez Nuñez

student•

Nos podrias pasar tu repositorio para ver cual puede ser el problema.

Jinny jose Cardenas labrador

student•

Para ayudarme de vez en cuando uso comparar código (https://charactercalculator.com/es/text-compare/) o chat GPT.... y de ahí es mas fácil ver el error... e imagino que debe ser una práctica común en los programadores de los diferentes lenguajes.

Irving Juárez

student•

Muy limpia la sintaxis del contexto, pero la logica del fetch handling sigue siendo muy compleja y dificil de leer. Yo creo que haciendo un state machine lo haria mucho más legible

Haikel Mustafá

student•

En caso de que no queramos cambiar los nombres de las propiedades, podemos redefinirlos en el objeto. Algo útil si tenemos que cambiar muchas propiedades en muchos sitios

  const {
    completedTodos: completed,
    totalTodos: total,
  } = React.useContext(TodoContext)

Max Andy Diaz Neyra

student•

import { Contexto } from './direccionContexto/'
const { value } = React.useContext(Contexto)
useContext acepta un objeto de contexto (el valor devuelto de React.createContext) y devuelve el valor de contexto actual. El valor actual del contexto es determinado por la propiedad value del <MyContext.Provider> ascendentemente más cercano en el árbol al componente que hace la llamada.

Carlos Esteban León Pinilla

student•

Super cool, no conocía esto. Antes usaba solo Redux

Josué Rubén Robles Gonzalez

student•

Sí, si llamas dos veces al mismo provider como en tu ejemplo, se crearán dos instancias distintas del proveedor. Cada instancia tendrá su propio estado y cambios en un provider no se reflejarán en el otro. Esto puede ser útil si necesitas contextos separados, pero si deseas compartir un mismo estado global, deberías utilizar solo una instancia del provider en la jerarquía de tu componente.

Josué Rubén Robles Gonzalez

student•

<App>
    <A1>
        <A2>
            <MyContext.Provider>
                <Consumer1/>
            </MyContext.Provider>
        </A2>
    </A1>
    <B1>
        <B2>
            <MyContext.Provider>
                <Consumer2/>
            </MyContext.Provider>
        </B2>
    </B1>
</App>

Moises Hernandez

student•

Se podría decir que es mejor usar mas contextos para separar las responsabilidades de nuestra app. Un solo contexto cuando es algo simple y Redux cuando tenemos una app de gran escala?

Christopher Andrés Guano Valencia

student•

Sí, aunque también depende de la empresa o de la solución que quieras realizar. También existe Zustand, que es más simple que Redux. Te comparto unas diferencias de un ingeniero de software:

Fuente: ¡No necesitas Redux en React! Aprende a usar Zustand, alternativa sencilla - Midudev

¡Nunca pares de aprender! 🚀🚀

Tomas Cejas

student•

Alguna ayuda con esto?

)

Tomas Cejas

student•

import React from 'react';
import { TodoCount } from './TodoPropiedades/TodoCount';
import { TodoList } from './TodoPropiedades/TodoList';
import { TodoSearch } from './TodoPropiedades/TodoSearch';
import { TodoItem } from './TodoPropiedades/TodoItem';
import { CreateTodoButton } from './TodoPropiedades/CreateTodoButton';
import { TodosLoading } from './TodoPropiedades/TodosLoading'
import { TodosError } from './TodoPropiedades/TodosError/'
import { TodoContext } from './TodoPropiedades/TodoContext';
import './App.css';

function App() {

  const {loading,error,filterTodos,completeTodo,deleteTodo} =  React.useContext(TodoContext);


  return (
      <React.Fragment>
      <main>

        <h1 className='title'>Todo-List</h2>

        <TodoCount/>

      <div className='search-div'>

        <TodoSearch/> 

      </div> 

        <div className='list-div'>
          <TodoList>
            {loading && <TodosLoading />}
            {error && <TodosError />}

            {filterTodos.map(todo => 
            (<TodoItem  


            key={todo.text} 

            text={todo.text} 

            completed={todo.completed}

            onComplete={()=>completeTodo(todo.text)} //Se encapsula la funcion dentro de otra para que se ejecute solo si es llamada

            onDelete={()=>deleteTodo(todo.text)}

            />))}   
          </TodoList>
        </div>
        <CreateTodoButton/>
        </main>
      </React.Fragment>
  );

}




export default App;

Fernando Francisco López Mauro

student•

Hola! Tenia el mismo error, debes de poner tu TodoCounter dentro del Provider, si esta fuera del provider no se puede :)

Federico Arias

student•

Vengo siguiendo la clase como puedo, cambie cosas del codigo para darle mi impronta y llegue hasta aca y estoy 3 horas intentando hacer funcionar el useContext, no pude, tiro la toalla. Me parece muy confuso la manera en la que se aborda la clase, se mezcla el context provider de la anterior clase con esta, busque el curso de Custom Hooks para profundizar y no esta disponible, ojala lo esten mejorando. Voy a estar atento cuando salga. Lo bueno es que mi proyecto corre sin el useContext, a lo mejor tenga que implementarlo para agregar el boton, asi aprendo como usarlo en un componente. Como critica constructiva, seria bueno que veamos como usar el contexto con un solo componente, ya que al usar customhooks (localstorage) y otros estados dentro del contexto, se hace un poco dificil de comprender quien le esta pasando que a cada archivo,

Ismael Cruz Procel

student•

Compartenos tu codigo para ver si podemos ayudar, en lo personal, también me parecen muchos conceptos en la misma clase.

Gerson Pineda

student•

Se pueden anidar providers?

Juan Castro

teacher•

Yep! Se termina viendo parecido a los callback hells :sweat_smile: pero ya ahí depende de ti y tu equipo si eso les gusta o no :D

Gerson Pineda

student•

Si, sería cuestión de definir bien el alcance de los Providers, gracias Juan

Yeferson Lasso España

student•

con tantas props al inicio, pense que eso era lo mas complicado de react y me estaba pareciendo un framework muy complicado, con el context ya todo tiene sentido jajaja

Maia aizner

student•

Mi aporte consiste en agregar una alternativa empty State al buscador, además del initial State que ya había tratando de mantener un código legible en el camino. Usamos un operador ternario para verificar si no está cargando (!loading) y searchedTodos está vacío (searchedTodos.length === 0). Dentro de esta verificación, anidamos otro operador ternario para distinguir entre si hay un término de búsqueda (searchTerm) o no.* Si hay un término de búsqueda (searchTerm), muestra <TodosEmptyState />.

Si no hay un término de búsqueda (!searchTerm), muestra <TodosInitState />.
Caso por Defecto: Si searchedTodos no está vacío, se muestra la lista de TodoItem.

Mauricio Conto

student•

Realmente a medida que transcurre el curso y se empieza a Volver complicado entender todo el Código, surgen nuevas alternativas como el TodoContext para Volver a organizer y estructurar la lógica. Ahora puedo entender nuevamente el aplicativo de principio a fin

useContext

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