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]
1056 questions
8
votes
4 answers
How to use useNavigation() within @react-navigation drawer?
Current Behavior
I have a react-native application that use react-navigation v5 for the routing.
I have a drawer (offeset menu left) in all my views
I use the stackNavigation for page transition.
Because of (1), my structure is drawerNavigator (a)…
Dimitri Kopriwa
- 8,478
- 12
- 70
- 140
8
votes
2 answers
How correctly pass a node from a ref to a context?
I'm trying to pass a node from a ref to a context. But because I have no re-render after the first render, the passed node is null. I thought about two variants (but I think they aren't the best):
To pass ref instead of ref.current. But then in use…
sergdenisov
- 6,913
- 8
- 38
- 56
8
votes
2 answers
NextJS Track Mounted Components in SSR
The following applies to SSR via NextJS.
I'm using React's context to keep track of IDs of certain mounted components. The gist is
class Root extends React.Component {
getChildContext () {
return {
registerComponent:…
Tyler Sebastian
- 7,244
- 5
- 33
- 56
7
votes
1 answer
React Context Provider all children re rendering
can someone explain to me why the next code re renders all children components from the provider
import { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
const App = () => {
const [theme, setTheme] =…
William Estrada
- 91
- 6
7
votes
2 answers
Where to put Context Provider in Gatsby?
I need to run some functions (eg. Office UI Fabric React's initializeIcons()) and AXIOS call (eg. retrieve the logged-in user with Context API) only the first time the site is hit, then store the retrieved values in the React Context and make it…
Andrea Ligios
- 46,329
- 24
- 102
- 208
7
votes
3 answers
How to keep or resupply React Context in a Gatsby site
I use React Context API to store the information that a user is authenticated.
In development mode when I type in any URL that redirects to the 404 error page the context data is lost. When I navigate to a valid page a previously logged in user is…
EliteRaceElephant
- 5,493
- 4
- 34
- 50
7
votes
2 answers
How to manipulate context - attach function to context or wrap dispatch in hook?
I'm wondering what the recommended best practice is for manipulating and exposing the new React Context.
The easiest way to manipulate context state seems to be to just attach a function to the context that either dispatches (usereducer) or setstate…
Dac0d3r
- 1,761
- 3
- 33
- 57
7
votes
2 answers
how to implement the new react-redux v6.0.0
i was trying to migrate react-redux v5.X.X to v6.0.0 and there dosent seem to be any documentation for it.
i am using following versions :
"react": "^16.4.2"
"redux": "^4.0.0"
"react-redux": "^6.0.0"
the official change log says.
Passing store…
hannad rehman
- 3,168
- 1
- 26
- 44
7
votes
2 answers
New React Context API + LocalStorage + Subscribe (Replacement for Redux)
I have an app using Redux. Is stores the global state as shown below:
Create Store:
import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
const configureStore = initialState =>…
Fernando Lopes
- 625
- 6
- 11
7
votes
1 answer
Redirect React Router from Context Provider
I'm new to React Router and trying to do a redirect from inside a provider using the new Conext API. basically my provider looks like this.
/* AuthContext.js */
class AuthProvider extends React.Component {
state = { isLoggedIn: false }
…
jonhobbs
- 21,469
- 23
- 94
- 144
6
votes
1 answer
How to reduce react context hell?
I have inherited a codebase where the previous owner has made extensive use of React.Context. This has resulted in what might be described as "context hell"
…
spinners
- 2,021
- 1
- 17
- 31
6
votes
3 answers
Component not re rendering when value from useContext is updated
I'm using React's context api to store an array of items. There is a component that has access to this array via useContext() and displays the length of the array. There is another component with access to the function to update this array via…
Jordan Paz
- 101
- 1
- 4
6
votes
2 answers
Testing react context with jest and react-testing-library
I am trying to set up tests for my component App.js that takes in a context as a prop and returns a provider. The issue is when I am trying to test it, the context that I pass into it always resolves to undefined.
I put a console log in the…
RhinoBomb
- 383
- 1
- 3
- 15
6
votes
1 answer
Combine Reducer without Redux
I have an application without redux, I handle the global state with hooks and the hook useReducer + context. I have 1 useReducer which makes like a Redux store. But to do this I can only send 1 reducer. In that reducer I have all the logic of the…
Nicols Esteban Morales Morales
- 101
- 1
- 8
6
votes
2 answers
How to handle side effects when migrating from Redux to React Context API + hooks
If you have a Redux Application which you'd like to migrate to the new React Context API + hooks (useReducer) how would you replace redux-saga or redux-thunk for handling side effects? Let's take the example from redux-saga's github page:
import {…
Dac0d3r
- 1,761
- 3
- 33
- 57