React Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Questions tagged [react-context]
2852 questions
311
votes
5 answers
React Context vs React Redux, when should I use each one?
React 16.3.0 was released and the Context API is not an experimental feature anymore. Dan Abramov (the creator of Redux) wrote a good comment here about this, but it was 2 years when Context was still an Experimental feature.
My question is, in your…
Alfrex92
- 6,278
- 9
- 31
- 51
273
votes
8 answers
How to update React Context from inside a child component?
I have the language settings in the context as like below
class LanguageProvider extends Component {
static childContextTypes = {
langConfig: PropTypes.object,
};
getChildContext() {
return { langConfig: 'en' };
}
render() {
…
mshameer
- 3,431
- 2
- 14
- 15
149
votes
2 answers
How to change the value of a Context with useContext?
Using the useContext hook with React 16.8+ works well. You can create a component, use the hook, and utilize the context values without any issues.
What I'm not certain about is how to apply changes to the Context Provider values.
1) Is the…
Randy Burgess
- 4,835
- 6
- 41
- 59
130
votes
6 answers
Access React Context outside of render function
I am developing a new app using the new React Context API instead of Redux, and before, with Redux, when I needed to get a list of users for example, I simply call in componentDidMount my action, but now with React Context, my actions live inside my…
Gustavo Mendonça
- 1,925
- 3
- 15
- 26
125
votes
5 answers
How to update the Context value in a Provider from the Consumer?
MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
I created my context in a separated js file where I can access my parent as well as my child component
Parent.js
import MyContext…
Nowshad Syed
- 1,293
- 3
- 9
- 6
98
votes
2 answers
Does new React Context API trigger re-renders?
I have been trying to understand the new React Context API and was playing with it. I just wanted to check a simple case - what all re-renders when data to a Provider is updated.
Check this small example on Codesandbox
So, in my example, I have an…
Sachin
- 3,350
- 2
- 17
- 29
82
votes
3 answers
Jest mock react context
I need some help understanding how one can test an application using React Context.
Here's my sample setup.
context.js
import React from 'react'
export const AppContext = React.createContext()
App.js
import React from 'react'
import MyComponent…
artooras
- 6,315
- 9
- 45
- 78
71
votes
8 answers
_react.default.createContext is not a function when using react-redux
I have a problem when adding components to the entry point, this error immediately pops up here, how to fix it?
I also try add only Main component but anyway i take that error, in main.jsx just class with render method return "hello…
Drop
- 1,394
- 3
- 15
- 25
70
votes
3 answers
React Context API - persist data on page refresh
Let's say we have a context provider set up, along with some initial data property values.
Somewhere along the line, let's say a consumer then modifies those properties.
On page reload, those changes are lost. What is the best way to persist the…
Cog
- 1,545
- 2
- 15
- 27
61
votes
7 answers
Cannot read property 'history' of undefined (useHistory hook of React Router 5)
I am using the new useHistory hook of React Router, which came out a few weeks ago. My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom.
Yet when I import the new useHistory from react-router, I get…
Radu Sturzu
- 613
- 1
- 5
- 5
56
votes
3 answers
React createContext issue in Typescript?
So I'm having a very weird issue with React Context + Typescript.
Working example
In the above example, you can see what I'm trying to do actually work. Essentially I'm managing state with the new useContext method, and it works perfectly.
However,…
bauervision
- 847
- 2
- 9
- 25
49
votes
3 answers
Apollo Client Cache vs. Redux
I'm trying to migrate from Redux Store to use Apollo Client Cache that comes with Apollo Graphql Client.
One of the key features that sets Apollo Client apart from other data management solutions is its normalized cache. Just by setting up Apollo…
GRS
- 1,829
- 1
- 9
- 23
44
votes
7 answers
Too many React Context providers
New to react here and trying to wrap my head round the new Context API (I haven't looked into Redux etc. yet).
Seems I can do much of what I need to do, but I'm going to end up with lots and lots of providers, all needing a tag to wrap my main…
jonhobbs
- 26,684
- 35
- 115
- 170
33
votes
3 answers
Testing an error thrown by a React component using testing-library and jest
Following Kent C Dodds' provider pattern explained in this blog post, I have a context provider component along with a hook to use that context.
The hook guards against the use of it outside of the provider,
export function useUser() {
const {…
Bhargav Shah
- 737
- 1
- 7
- 15
32
votes
6 answers
How to get the data from React Context Consumer outside the render
I am using the new React Context API and I need to get the Consumer data from the Context.Consumer variable and not using it inside the render method. Is there anyway that I can achieve this?
For examplify what I…
Gustavo Mendonça
- 1,925
- 3
- 15
- 26