Questions tagged [context-api]

Context-API is a global state management system for React through the use of the React hook useContext().

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…
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)}

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…
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…
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…
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 =>…
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…
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…
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:…
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 =…
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…
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…
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…
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…
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…
Álvaro
  • 835
  • 4
  • 12
1
2 3
24 25