Stack Overflow
Stack Overflow

Questions tagged [use-context]

useContext is a React hook for managing global state through the Context API.

586 questions
6
votes
2 answers

useState with useContext in Typescript

Lets say I have a basic setup for checking whether a user is logged in or not: import { createContext } from "react"; const UserContext = createContext(null) export default UserContext In my App.tsx I want to create a useState hook…
jmsapps
  • 388
  • 2
  • 17
6
votes
3 answers

Loosing component data on page refresh in react

I am working on something where I need to maintain the application level state i.e global state, I am using react hooks for that useContext and useReducer. So what I am doing is on button click I am setting up my context and then using it thought my…
manish thakur
  • 760
  • 9
  • 35
  • 76
5
votes
0 answers

Prevent unnecessary re-renders of components when using useContext with React

I've seen a few questions related to this topic, but none that tackle the issue head-on in a pure way. useContext is a great tool for minimizing prop-drilling and centralizing key data needed across your app; however, it comes at a cost that I'm…
RyanY
  • 635
  • 1
  • 8
  • 20
5
votes
4 answers

Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) in my React project

I am new to context API and trying to get my code to work. I am getting error: Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) Would some of you good people help with this? The initialUserState logs an…
Wambura
  • 109
  • 1
  • 2
  • 12
5
votes
1 answer

How to render only the concerned component with a custom hook and useContext

I'm trying to create a custom hook useFocus based on useContext to set the focus only on the component i select. Its working but other components are rendering even i used useCallback for the function returned by my useFocus custom hook. i would…
Norbert P
  • 53
  • 3
5
votes
2 answers

Conditionally execute useContext in React

I am looking to conditionally call useContext. This is my original code, which runs correctly, but fails tslint. Component that calls useResourceScope - say Component1 import { useEffect } from 'react'; export function useSubscribeListItemStore( …
LearnToImprove
  • 345
  • 5
  • 15
5
votes
1 answer

useContext is not working in my react code

App Component: import React,{createContext} from "react"; import "./style.css"; import A from "./A"; export const userContext =createContext(); function App() { return (
Samuel T
  • 233
  • 2
  • 12
4
votes
1 answer

Why is Context undefined in child component?

I'm trying to learn React & context. In the following example, I have my console log correctly the user (which is currently set) in app.js, but in the RequireAuth component (and in its child) logs undefined. I could probably pass user & setUser as…
lytonist
  • 53
  • 6
4
votes
1 answer

My state changes between the reducer and the consuming component

App purpose: The purpose of this React app is to handle scoring of a very specific dart-game. 2 players, each having to reach 33 hits in the fields 20-13, Tpl's, Dbls's and Bulls. No points, only the number of hits are counted. The hits are added…
Martin Frank Moesby Petersen
  • 61
  • 5
4
votes
0 answers

Dependency Cycle Issue in React

I have created a global context in my app and I have a wanted to show ErrorMessage and Login if they are triggered to open. So I put them in a context. The problem is that Login outputs a dependency cycle issue. I think this is because ErrorMessage…
Joseph
  • 7,042
  • 23
  • 83
  • 181
4
votes
4 answers

React-Router & useContext, infinite Redirect or Rerender

I have a web application that I've been developing for a little over a year and some change. The frontend is react w/ react-router-dom 5.2 to handle navigation, a service worker, to handle caching, installing, and webpush notifications, and then the…
TheFunk
  • 981
  • 11
  • 39
4
votes
1 answer

React - Firebase authentication and useContext

I'm trying to figure out the best way to create a global state variable that will hold a firebase authentication user id. For example the below code would check if a user is logged in and then send them to welcome page if successful. But I also need…
Daniel P
  • 75
  • 1
  • 4
4
votes
2 answers

React input value not re-rendering on button change

I am building a shopping cart project. One of the features that I am trying to build for my Cart page is an input value displaying the quantity for each product in the cart (so that the user can manually adjust the number of products) as well as a…
LearningPython
  • 171
  • 9
4
votes
3 answers

React useContext with "setState"

I recently started using the Context React Api with useContext Hook. I have observed that when we have a state variable i.e. const someState = useState(state, setState), some developers pass setSate directly in the provider values and then calling…
Anastasia Evgenia Alexandri
  • 51
  • 1
  • 1
  • 7
4
votes
2 answers

How to dispatch action in Custom Hooks by useReducer and useContext?

I created a sample for a button toggle. This is done by useContext (store the data) and useReducer (process the data). and it is working fine. Here's the CodeSandBox Link to how it works. version 1 is just dispatch when clicking the button. Then I…
SPG
  • 6,109
  • 14
  • 48
  • 79
1
2
3
…
39 40