Questions tagged [use-context]

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

586 questions
3
votes
0 answers

React useContext not setting the value at first time

I am newbie to react and i am trying to learn useReducer and useContext. What i am trying to do is add the product to the cart and adding it to the context variable by using setContext, const [context, setContext] = useContext(Context) const [cart,…
3
votes
3 answers

How can i share data between non-related components in react js?

I'm quite new with reactjs, and I'm struggling with the following: I have a Header component (in my App.js file) which contains an AudioPlayer. This AudioPlayer needs to be updated with current value of src (with the path of the song, stored in…
3
votes
2 answers

Split up Context into state and update to improve performance (reduce renders)?

Some blog articles split up the context into two seperate update and state context when working with React Context. I am wondering whether this really increases the performance or can lead to reduced render cycles. So the final solution will…
mleister
  • 1,697
  • 2
  • 20
  • 46
3
votes
4 answers

How to fix my React Context to render useEffect and reload table data

I have an input form that selects data to be rendered inside my tables. The data only appears after a forced page reload. I would like for the data to re-render with the expected data entered by the user after each submit in my input. To do so I…
andres
  • 1,558
  • 7
  • 24
  • 62
3
votes
1 answer

Typescript error - Unable to find react context in wrapped child component

I'm trying to dynamically set context in a parent component from a child component using this post as a guide Here's my App.tsx: export interface User { username: string; } export interface iUserContext { users: User[]; setUsers:…
Andy
  • 364
  • 1
  • 8
  • 21
3
votes
1 answer

In functional component useContext works in console.log but returns error on render

I have been looking around, but can't find a definite answer. I have wrapped my app in , I have passed props and tried return
{props.user.username}
but nothing works, just getting the same TypeError: Cannot read property…
Smlok
  • 598
  • 6
  • 19
3
votes
1 answer

Delay in useContext React JS

In my React App, when the user logins, a token is generated (JWT) after that it is stored in LocalStorage. Once everything is done, in order to maintain user login for different routes, I'm using useContext. I want to show logout button if the user…
Fara
  • 56
  • 4
3
votes
1 answer

'TypeError: Right side of assignment cannot be destructured' useContext React Hooks

I am working in React Hooks and have encountered a problem with the useContext method. My context class for a MapStyle (using Google Maps API) is as follows: import React, { createContext, useState } from 'react'; const MapStyleContext =…
Andrew
  • 31
  • 1
  • 2
3
votes
1 answer

ContextProvider doesn't mount when page refreshes

Please see the full code on codesandbox. I have two Route components for my countries api app- <>
Sapinder
  • 193
  • 2
  • 14
3
votes
1 answer

Context - dispatch is not a function (React)

Very new to context and reducers in React. I am currently trying to use Context to get a date string from an event on a Line Graph. The line graph I'm using is from react-chartjs-2. My context is setup and provided as below: export const Context =…
Malkeir
  • 113
  • 7
3
votes
3 answers

Is React Context an antidote for prop drilling?

If React Context API is meant to be used for passing global variables around, why should we use them to substitute passing props from parent to child components (prop drilling)? Since most props being passed are not meant to be available…
Future Man
  • 43
  • 2
  • 8
3
votes
1 answer

While trying to pass image from res.data.photo to useContext I am getting Cannot read property 'data' of undefined

I am getting, cannot read data of undefined error. All I am doing here is trying to pass res.data.photo to useContext(UserLoginContext) from the Login.js. I need to display the image in Navigation.js src={dataImage},{loginImage} Unhandled Rejection…
soccerway
  • 10,371
  • 19
  • 67
  • 132
3
votes
1 answer

React state is not updated after dispatch call using React useContext hook

Yow guys, React beginner here. So basically, I am trying to fetch the updated state using React useContext hook. The state is set inside a function call where the dispatch is placed, and the function call is bind to the button onClick event. The…
fmsthird
  • 1,745
  • 2
  • 17
  • 34
3
votes
0 answers

Passing React Context Variables as Props vs. Consuming Directly in Functional Components

When a stateful variable that's been instantiated using the useState() React Hook in a Context Component I've built is updated (using a setState() method), one of my functional components that consumes this variable doesn't update. Should this…
Davis Jones
  • 1,504
  • 3
  • 17
  • 25
2
votes
2 answers

How to properly splitt dispatch and state so that I dont get re-renders?

I had implemented useContext + useReducer and I found that I was getting re-renders when only dispatch changed. I could have two separate components and if one dispatch was triggered both component got changed. Example: Both increment and decrement…
CodingLittle
  • 1,761
  • 2
  • 17
  • 44