useContext is a React hook for managing global state through the Context API.
Questions tagged [use-context]
586 questions
4
votes
1 answer
React useState value in Context API always use initial value instead of updated value
I'm using Context API to store global value like userId to share between components across entire application.
Here's what the context.js looks like:
import React, { useState } from 'react';
const AppContext = React.createContext({
date: new…
DANKEST
- 41
- 1
- 3
4
votes
1 answer
useContext values gets cleared during page refresh and logout
While updating the profile, profile.name gets displayed via useContext()in navlink (Navigation.js). But as soon as page gets refresh or during logout the profile.name gets cleared, also profile.photo is not displaying too in navlink.
I want to…
soccerway
- 10,371
- 19
- 67
- 132
3
votes
1 answer
Component doesn't immediately re-render when state in Context changes
I had some problems while implementing React Context in my NextJS ecommerce project. When adding products to the cart, everything was fine but when I opened the Cart modal to increase or decrease the quantity of each product before confirming the…
Duck1010
- 29
- 4
3
votes
1 answer
useContext is returning returning the initial value and not the assigned value?
This is my first time using usecontext,and i got stuck with this problem,where the usecontext returns the initial value and not the passed value.
This is my App.js
import { useContext } from 'react';
import {userprop} from './Context'
function…
Hariharan K
- 31
- 2
3
votes
1 answer
useContext doesn't work when in same file
So not sure if this is exactly the problem, but wondering why this is happening when using contexts in the same file vs different files.
So here is the constant:
StartupContext.js
import React from "react";
export const StartupContext =…
thestephenstanton
- 519
- 2
- 20
3
votes
2 answers
React Context Provider not setting value
I am trying to get started with React context hooks and I seem to be having an issue I dont understand.
I have defined a user context that is simply a string that says "hello user" as such:
import { useContext, createContext } from "react"
export…
Aaron56
- 98
- 2
- 6
3
votes
3 answers
Showing white blank screen with the use of context api in React js
Showing white blank screen with the use of context api in React js
I'm running my code which has no errors, but when I take a trip to localhost:3000
I get a blank screen.
These are the React js files in the project, If I don't use the Context-API,…
yennam praneeth
- 71
- 1
- 3
3
votes
1 answer
using useContext with custom hooks vs useContext + useReducer
I recently enterd a project and saw something that I have not seen before when it comes to useContext in react.
The global state in the project uses hooks which it sends in to a context and then when calling that hook later on the global state is…
ThunD3eR
- 3,216
- 5
- 50
- 94
3
votes
1 answer
How to initialize context only once at startup in React
I'm relatively new to React. I have a set of data that needs to be retrieved once and only once from the server, at start-up. The data is then displayed in my Footer component which is in App.js. I thought that useContext() might be the best way…
Peter Kronenberg
- 878
- 10
- 32
3
votes
1 answer
Advise about the reduction of the amount of React useState hooks
I am trying to build my very own first project that is relatively large, at least for my level of experience anyway.
I am heavily relying on useContext in combination with useStates hooks to handle the logic between my different components, as time…
Georgi
- 65
- 5
3
votes
0 answers
How to use context provider with react router components?
I have browsed almost every resource on the internet and have not found a solution so please don't recommend me someone else's question that is identical because I have most likely already tried it.
Here is my container that has all of the routes.…
korpe
- 83
- 1
- 8
3
votes
0 answers
"TypeError: undefined is not a function" in ReactJS Test (useContext() is undefined?)
I am currently trying to test photos.js component. However, it shows an error at render. I haven't even put a test case to it. Here is what's inside of photos.test.js:
import { render, cleanup } from '@testing-library/react';
import Photos from…
Victoria
- 31
- 3
3
votes
3 answers
How to avoid "React Hook useEffect has a missing dependency" and infinite loops
I have written a react-js component like this:
import Auth from "third-party-auth-handler";
import { AuthContext } from "../providers/AuthProvider";
export default function MyComponent() {
const { setAuth } = useContext(AuthContext);
…
MarcoS
- 17,323
- 24
- 96
- 174
3
votes
1 answer
my react app uses useContext to store login and user info, but if I navigate by changing the URL all info is lost and everything resets
import Home from "./pages/home/Home";
import Profile from "./pages/profile/Profile";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Messenger from "./pages/messenger/Messenger";
import {
…
Bear Bile Farming is Torture
- 4,317
- 4
- 27
- 61
3
votes
1 answer
At what nesting the Context Provider should be wrapped while using react-router and redux?
When i was learning react I learnt to create a context.js file and put all the states which are used throughout the component tree and wrap the root component in index.js with context provider so that entire app can access them.
Like…
Sanketh B. K
- 759
- 8
- 22