Contexto global de la aplicación

Por que usaremos un estado global
Para que, cuando nuestro proyecto vaya aumentando su complejidad, no sé vuelva tedioso estar pasando la información que componetes, hermanos, hijos, padres, necesitan entré sí.

También, por que es mas facil debuggear errores teniendo una sola fuente de la verdad en cuanto almacenamiento para nuestra aplicación a la vez que lo hace mas legible y facil de mantener. 😃

Con el context evitamos el “props drilling” ¿Que es? Cuando tenemos que pasar los datos que necesita cada componte por las propiedades,

Componete padre => hijo => nieto => bisnietos.

Con reactContext nos evitamos eso. y directamente llamamos dentro del componente al dato que necesitamos a travez del contexto.

Los tenemos por separados
Componente padre {contexto = dato}
Hijo {contexto = dato}
nieto{contexto = dato}
bisnieto {contexto = dato}

El prop drilling lo definimos como un paso del desarrollo que ocurre cuando necesitamos obtener datos que están en varias capas en el árbol de componentes React, es decir, necesitamos comunicar los componentes padres con sus componentes hijos.
 
El contexto global nos permite evitar el envío de props entre todos estos componentes (prop drilling), teniendolos “centralizados” viviendo en un solo lugar y al cual podemos acceder desde cualquier parte de nuestra aplicación (todo lugar que se encuentre contenido en el wrapper)

En el curso de introducción a react varias cosas no me quedaron claras, varias cosas aparecían y solo se infería que se utilizaban. Como el provider y consumer.

Esas mismas cosas en este curso me quedan más claras, pero eso no implica que el curso de introducción a react no sea bueno, el curso de intro a react básicamente nos quita el miedo a afrontar el entorno y este muestra más claro varios conceptos.

Es como aprender inglés, duolinguo no te enseñara ingles, pero te quita el miedo a afrontar el idioma y hablar con nativos realmente te enseñara como se usa realmente el lenguaje.

Me encanta como estos nuevos cursos se complementan.

Usaremos un estado global ya que es más sencillo comunicar las propiedades y el estado por los componentes.
Como la aplicación no es tan grande, Context es bastante útil en lugar de Redux o useReducer().

De igual manera, considero importante crear un Hook de useContext() para reutilizarlo a lo largo de la aplicación.

Hola compañeros, se que todos estaremos escribiendo lo mismo pero ahi les va por que usamos un contexto global en sencillas palabras.

Básicamente lo usamos para poder tener diferentes estados y usarlos en toda la aplicación, sin la necesidad de volverlos a crear cada vez que necesitemos un estado en particular en cada archivo [index.jsx[.

En resumen, es para no repetir código a lo que yo pude entender, y esto hará que nuestro código sea mas limpio y ordenado

Por si a alguien le interesa les muestro mi implementacion del contexto con typescript.

import { createContext, ReactNode } from "react";

type Props = {
    children:  ReactNode
}

const ShoppingCartContext = createContext<Props | null>(null); 

export const ShoppingCartProvider: React.FC<Props> = ({children}: Props) => {
    return (
        <ShoppingCartContext.Provider value={{ children }}>
            {children}
        </ShoppingCartContext.Provider>
    )
}

export default ShoppingCartProvider;

Por fin una explicación sencilla y didáctica sobre el tema, gracias!

Usamos un estado global porque es la manera más profesional, fácil y escalable de hacer que la información se converse en toda nuestra aplicación.

El principal motivo para utilizar React Context para compartir datos globalmente es mantener un estado compartido accesible a lo largo de varios componentes en una aplicación de React, sin necesidad de pasar explícitamente props a través de múltiples niveles de la jerarquía de componentes.

El Estado Global de nuestra aplicacion generado por createContext de React, nos permite acceder a todos los datos que necesita un componente, independiente de todo el resto.
Esto nos permite manejar de manera individual las props que recibe cada componente y asi hacer mas facil la correccion de errores ya que tenemos toda la informacion de la aplicacion reunida en el Context.

para utilizar los valores de los estados en distintos componentes!

Usamos un estado global para que así distintas partes de la aplicación tengan la capacidad de interactuar con la data que viene de la API, para hacer un filter, ejemplo de Electronics, se accede al estado global, se filtran desde allí y se obtiene, para no estar realizando constantes fetchs en los distintos labels de los productos

Eso es lo que pienso 😃

{item.title} {/* Usar item.title */}

{/* Usar item.images[0] */}

+

Precio ${item.price} {/* Usar item.price */}

Me gustan estas clases gráficas donde la profesora se pone a explicar lo más simple y con pizarra los conceptos que aprendemos 😃

La cosa es que yo tengo una carrito de compras que es un contador, es decir cada vez que un usuario agregue un producto o lo quite este carrito va a sumar o restar dependiendo del caso, el asunto es que el puede variar desde el Home si se agrega un articulo, o desde el componente My Orders si el usuario se arrepiente y borra el artículo, es por ello que mi carrito debe convertirse en un estado global porque puede recibir muchos requerimientos de componentes distintos como en este caso que mencioné se usaron los componentes Home y My Orders.

Usar el estado global permite que tengamos un código más prolijo y con una comunicación más eficiente entre componentes, sin necesidad de pasar props. Se evita el prop drilling.

Siempre se debe usar el estado global para poder comunicar todos los componentes con este unico contexto y de esta manera evitar el Prop Drilling con la comunicacion de padre e hijo y asi sucesivamente

Usamos estado global para tener una única fuente de verdad a donde sin importar que componente sea pueda acceder a la información de forma directa; con esto nos evitamos el uso de props para comunica información entre componentes.

¿Por qué usaremos un estado global?
Creo que utilizaremos un estado global en este proyecto porque siendo un e-commerce va a necesitar que los componentes se comuniquen eficientemente y que a la vez sea escalable en el futuro. También que pueda ser mantenido fácilmente.
.
Una analogía divertida para que se entienda el concepto es la siguiente:

imagina que estás dirigiendo un equipo de construcción. En lugar de que cada trabajador tenga su propio conjunto de herramientas y materiales en cada piso, decides tener un almacén central donde todos pueden obtener lo que necesitan. Esto acelera el proceso de construcción y asegura que todos tengan acceso a las mismas herramientas de manera eficiente

Usamos el estado global para comunicar la información a todos los componentes.

Para tener acceso desde todo los componente a variables y constantes

A como lo entiendo,

el contexto local nos permite detectar las interacciones en un mismo componente y que dicho componente actúe en consecuencia pero el contexto local es invisible para otros componentes.

el contexto global permite que cualquier componente pueda ver las interacciones donde se ha establecido el contexto global.

Y mi analogía sería, el contexto local es todo lo que tienes almacenado en el disco duro de tu computadora y todo lo que haces en ella, el contexto global es como si estuvieras trabajando con muchas personas pero desde google drive!

Básicamente utilizaremos el estado global para facilitar la comunicación entre componentes evitando el prop drilling.

Usamos el Estado Global para tener asceso a nuestro componentes en cualquier parte de la App y asi no caer en la tediosa tarea de estar comunicando proops por doquier y caer en Proops Drilling.

Utilizamos un estado global, ya que necesitamos disponer de los elementos y el contador de productos mientras nos desplazamos a traves de nuestra aplicación, si lo dejamos en local solo las dispondremos en el home o tendríamos que pasarla por props a cada pagina donde la quisieramos tener.

Por qué ya no vamos a utilizar un estado local si no vamos a utilizar un estado global?
Porque necesitamos que todos los componentes compartan información entre ellos y no queden aislados. Además, es una forma de evitar pasar información mediante propiedades entre componentes padres a hijos, debido a que cuando se tiene un gran cantidad de ellos se vuelve tedioso trabajarlos a esto también se le conoce como “props drilling”.

Usaremos un estado global ya que de esa manera, enviaremos la información entre componentes del árbol, y así evitaremos el prop drilling . También hará que nuestro código sea más legible.

La razón es que nos permite comunicar información entre componentes de manera más eficiente y permite hacer más escalable el proyecto. Por otro lado, podríamos usar props, pero ello genera que el proyecto sea más complejo a la hora de comunicar la información entre componentes y a medida que el proyecto crezca se hará más confuso y tedioso.

Se utiliza el Contexto para no tener que estar pasado props entre elementos padre e hijo y solamente queda llamar la propiedad en el componente que se necesita

Necesitamos un estado global para compartir datos entre varios componentes en nuestra aplicación de React. En lugar de pasar los datos manualmente a través de múltiples niveles de componentes como “props”, el estado global permite que los componentes accedan a los datos directamente desde el contexto sin necesidad de pasarlos explícitamente.

Podemos usar un contexto en React para que nuestra API viva alli, y se pueda usar en todas las paginas sin necesidad de hacer varios reaquest (tocaria hacer varios request si nuestra API viviera en lo local). Asi usamos una sola fuente de almacenamiento.

Con estado global el usuario va a poder hacer muchas solicitudes en diferentes componentes de forma de que te manda la información centralizada y va a escuchar todos los componentes de forma dinámica y mas efectiva de manera local es demasiado complicado y no es lo mismo como lo que dice el ejemplo del banco

Respuesta del quiz = Vamos a usar un estado global para poder consumirlo desde distintos componentes

Básicamente, Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.

Porque usar el estado global?
Nuestro proyecto no solo requiere que tengamos informacion aislada en un estado local en cada componente, sino que compartiremos informacion en los distintos componentes que estamos creando. Ademas de tener una fuente unida de verdad para administrar la informacion a todos los componentes

Un contexto global nos permite acceder desde cualquier parte de nuestra aplicacion

Usaremos un estado global para que todos los componentes estén comunicados entre sí y tengan acceso a todas las props, estados, etc.