Stack Overflow
Stack Overflow

Questions tagged [react-context]

React Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Official React Context Docs

1056 questions
18
votes
4 answers

React useReducer Hook fires twice / how to pass props to reducer?

FOREWORD / DESCRIPTION I am trying to use React's new hooks feature for an e-commerce website that I am building, and have been having an issue working a bug out of my shopping cart component. I think it is relevant to preface the discussion with…
Spencer Duball
  • 452
  • 7
  • 12
18
votes
2 answers

How to change React context programmatically?

I'm trying to use the new React context to hold data about the logged-in user. To do that, I create a context in a file called LoggedUserContext.js: import React from 'react'; export const LoggedUserContext = React.createContext( ); And sure…
kace91
  • 721
  • 1
  • 5
  • 20
17
votes
1 answer

Problem with protected routes, context API and firebase user authentication request

I am writing a basic CRUD React app that uses Firebase for authentication. At the moment I am trying to create a protected route for a component named Dashboard. The protected route insures that any encapsulated routes (such as the Dashboard) do not…
William
  • 3,608
  • 11
  • 41
  • 85
16
votes
3 answers

React Context API not working from custom NPM component library

I've built a ReactJS component library that I use for multiple projects installed via an NPM package using a sim link. I want to use the context API to pass data from a parent component served from the component library to my base project to be…
Reedling78
  • 343
  • 1
  • 2
  • 10
13
votes
4 answers

React context with hooks prevent re render

I use React context with hooks as a state manager for my React app. Every time the value changes in the store, all the components re-render. Is there any way to prevent React component to re-render? Store config: import React, { useReducer } from…
lecham
  • 1,450
  • 4
  • 14
  • 27
13
votes
2 answers

React Context api - Consumer Does Not re-render after context changed

I searched for an answer but could not find any, so I am asking here, I have a consumer that updates the context, and another consumer that should display the context. I am using react with typescript(16.3) The Context(AppContext.tsx): export…
Roie Beck
  • 715
  • 1
  • 9
  • 20
12
votes
1 answer

React useContext returns undefined

I'm trying to use React Context to manage states for my project, but I can't seem to make it work for my CRA codebase this time while I had successful attempts on other projects. useContext returns undefined so I couldn't access the values inside…
nayiaw
  • 1,232
  • 3
  • 15
  • 24
10
votes
1 answer

Is it safe to use a useState "setter" function as a callback ref?

Is it safe to use the setter function of a useState hook as a callback ref function? Will this cause trouble with Suspense or other upcoming React changes? If "yes, this is OK", that's cool! If "no" why not? If "maybe" then when is it OK vs. not?…
Justin Grant
  • 41,265
  • 11
  • 110
  • 185
10
votes
2 answers

Update React Context using a REST Api call in a functional component

I am trying to update the context of a React App using data resulted from an API call to a REST API in the back end. The problem is that I can't synchronize the function. I've tried this solution suggested in this blog post…
Octavian
  • 365
  • 1
  • 3
  • 16
10
votes
1 answer

How do I share context between a library component, and my application component?

I'm using lerna to create a monorepo where I'd have a structure like this: root packages application - Our root application components - Just some react components, that are to be used by the application Here is a working Github with…
dwjohnston
  • 7,389
  • 20
  • 81
  • 147
10
votes
3 answers

React context - 'contextType' is not defined

I am using react-dom@16.6.1 and react@16.6.1 that should support react Context and trying to run a simple example same as the react-context: app.js import React, { Component } from 'react'; import AppManger from './components/AppManger'; import…
Itsik Mauyhas
  • 3,163
  • 7
  • 48
  • 93
9
votes
1 answer

React - useContext inside class

I'm newbie in react and i want use useContext inside my class, how do i solve this? This is example of my current code right now import { Context } from '../context/ChatListContext' const ChatList = ({ onAction }) => { const {state,…
Hanif Nr
  • 164
  • 1
  • 10
9
votes
1 answer

React Context - Context.Consumer vs Class.contextType

I am learning about the somewhat newly introduced React.Context API, but I've noticed some inconsistencies on it's consumption across examples. Some use the original Context.Consumer HOC method, while some (including the React Docs) use the static…
sgarcia.dev
  • 4,375
  • 11
  • 33
  • 57
9
votes
2 answers

Using react context with react hooks in typescript

Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this const {authState, authActions} = useContext(AuthCtx); To begin with I…
Ilja
  • 35,872
  • 66
  • 218
  • 401
8
votes
2 answers

React context not updating

I have set a basic sample project that use Context to store the page title, but when I set it the component is not rerendered. Principal files: Context.js import React from 'react' const Context = React.createContext({}) export default…
kuroneko
  • 163
  • 2
  • 2
  • 8
1
2
3
…
70 71