Context-API is a global state management system for React through the use of the React hook useContext().
Questions tagged [context-api]
370 questions
5
votes
1 answer
how to combine multiple reducers in React using Context API
Working on React app where I have some global state defined with a single reducer currently but would like to introduce multiple reducer as the app is kinda large so would be easier and nicer to organize state on multiple reducers!
Currently I…
![](../../users/profiles/13104967.webp)
Lulzim
- 87
- 6
4
votes
2 answers
React: Why isn't my context value updated?
I'm playing with React Context API. I created a simple component:
import React, { createContext, useContext } from 'react';
const MyContext = createContext(1);
const MyComponent = () => (
<>
{useContext(MyContext)}
…![](../../users/profiles/4403732.webp)
Robo Robok
- 15,554
- 12
- 46
- 87
4
votes
1 answer
How to properly store and retrieve data using react js context api? The code, I have is not working as expected
I am learning react. I am trying to store user information after fetching the data from an api endpoint and store it in context. The problem is I have to execute the function in every webpage to access the information stored in it. I tried using…
![](../../users/profiles/14544866.webp)
prehistoricbeast
- 291
- 7
4
votes
4 answers
hook change state doesn't update context provider's value?
I have 2 component, and a context provider, when I call my hook at parent level, I have no issue changing the state and having those 2 component getting the value via context
working demo of contex api usage but I call change state at parent level…
![](../../users/profiles/13395371.webp)
Andre Thonas
- 231
- 1
- 9
3
votes
0 answers
Value from Context Not Rerendering
I'm using two variables from a context, but they don't consistently render based on the way I use them in the return.
// given a dictionary and key passed in from context
const {myDict, KEYTOMATCH} = useContext(...);
This works as I expect it…
![](../../users/profiles/3344422.webp)
ladder
- 147
- 1
- 7
3
votes
1 answer
Using ContextAPI doesn't re-render its consumer, but content is changed. Why?
Consider this little example. I did some experiments with Context API while learning through the book.
const MyContext = React.createContext(0);
const D3 = () => {
console.log('render D3');
return {num =>…
![](../../users/profiles/3811223.webp)
Phryxia
- 127
- 8
3
votes
1 answer
prevent child component to re-render below context provider with memo
I am using a context provider in React to share data across several components. However since a value gets changed from one of my subcomponents, it rerenders all of my other components which partly leads to performance issues. So I want to prevent…
![](../../users/profiles/10566935.webp)
André
- 353
- 2
- 11
3
votes
1 answer
React Context Api vs Local Storage
I have some general questions which are bothering me regarding the context API and local storage.
When to use local storage?, when to use the Context API and when would I use both?
I know that to persist data after the refresh I need something like…
![](../../users/profiles/12684838.webp)
Steytz
- 123
- 1
- 8
3
votes
2 answers
"No overload matches this call" error when setting up ContextApi & useReducer using Typescript
I trying to set up ContextApi & useReducer with typescript. On my "issuesInitialState" variable in useReducer, I get the error:
No overload matches this call.
Overload 1 of 5, '(reducer: ({ state, action }: IssueReducer) => {}, initializerArg:…
![](../../users/profiles/13097920.webp)
webber
- 57
- 1
- 7
3
votes
2 answers
Handle Nested Context Providers
I have a few nested Context Providers in my app that look like this
export const LangContext = React.createContext("javascript");
export const FontContext = React.createContext("mono-space");
export const FontSizeContext =…
![](../../users/profiles/11603322.webp)
Alexandar Mahone
- 59
- 1
- 5
3
votes
2 answers
useEffect and the context api
I'm running into a strange issue with useEffect not noticing the change of values being changed with the context api. I have a fetch that I want to run everytime a certain value is changed and I'm using the context api to manage my state value but…
![](../../users/profiles/12125984.webp)
Josh Wren
- 145
- 8
2
votes
1 answer
React.JS Context API Problem (Rendering Problem)
I'm currently trying to implement a e-commerce project. My question is about Context API and Reducer.
Cannot able to render price and other details of the product. in Cart Component
Context.Js ;
Here is my Context.js
Reducer.JsHere is the…
![](../../users/profiles/15683550.webp)
Ugurcan Ozyesilova
- 31
- 3
2
votes
2 answers
Changing language with React Hooks and Contex API
I'm creating a page and it will be avaliable to use in 3 languages. I created 3 files that contain data neccesary to change displayed text. The concept is to check users browser language and display the language accordingly (it works ok) but also to…
![](../../users/profiles/12317212.webp)
Paweł
- 43
- 4
2
votes
2 answers
React App is giving error when using context API
I am learning React and right now trying to implement the old way of working with Context API but when I try to compile I get an error.
It says :
TypeError: context is undefined. Version is 17.0.1
Here are the files I use:
Test0.js
import React from…
![](../../users/profiles/14543758.webp)
ronitgupta
- 23
- 4
2
votes
2 answers
Context Provider in TypeScript
I got the simplest context provider working on ES6 but I am unable to transform it for use on a TypeScript project. Every website I search for has a completely different take on implementing context api.
It is just a boolean variable and a function…
![](../../users/profiles/10564162.webp)
Álvaro
- 835
- 4
- 12