Hola a todos , soy nuevo en React . Estaba tratando de crear un estado global usando la API de contexto . Me encontré con algo inesperado. Lo que aprendí es que cuando se crea un contexto, tiene un proveedor que envolverá los componentes que necesitan los datos y cuando el valor cambia, el proveedor volverá a representar todos los componentes envueltos, ¿verdad?

Mira esto:

 // AuthContext.js export const AuthContext = createContext(null); const AuthProvider = ({ children }) => { const [user, setUser] = useState({ name: null, }); return ( <AuthContext.Provider value={{ user, setUser }}> {children} </AuthContext.Provider> ); };

 // index.js <AuthProvider> <App /> </AuthProvider>

 // App.js function App() { console.log("[App] ran"); return ( <> <Dashboard /> <Login /> </> ); }

 // Dashboard.js function Dashboard() { console.log("[Dashboard] ran"); return <div>Dashboard</div>; }

 // Login.js function Login() { console.log("[Login] ran"); const { user, setUser } = useContext(AuthContext); const inputNameRef = useRef(); return ( <div> <input placeholder="Enter your name..." ref={inputNameRef} /> <button onClick={() => { setUser(inputNameRef.current.value); }} > Submit </button> </div> ); }

Cuando el código se ejecuta por primera vez, la salida es:

[Aplicación] corrió

[Tablero] corrió

[Iniciar sesión] corrió

y cuando se hace clic en el botón Enviar , se llamará a la función setUser y se establecerá un nuevo valor en el estado AuthProvider. El proveedor debe volver a procesar todos los componentes, y la salida anterior debe registrarse nuevamente, pero no, la salida es solo:

[Iniciar sesión] corrió

Algo que es interesante para mí es que cuando uso useContext en el componente Dashboard funciona, quiero decir que el componente se volverá a representar. Está relacionado con el gancho useContext , creo, pero no sé cómo funciona. ¿Qué está pasando debajo del capó?