ts) and [ ` useCallback ` .
](/reference/react/useCallback#skipping-re-rendering-of-components)

* * *

##  Troubleshooting

###  My component doesn’t see the value from my provider

There are a few common ways that this can happen:

  1. You’re rendering ` <SomeContext.Provider> ` in the same component (or below) as where you’re calling ` useContext() ` . Move ` <SomeContext.Provider> ` _above and outside_ the component calling ` useContext() ` . 
  2. You may have forgotten to wrap your component with ` <SomeContext.Provider> ` , or you might have put it in a different part of the tree than you thought. Check whether the hierarchy is right using [ React DevTools. ](/learn/react-developer-tools)
  3. You might be running into some build issue with your tooling that causes ` SomeContext ` as seen from the providing component and ` SomeContext ` as seen by the reading component to be two different objects. This can happen if you use symlinks, for example. You can verify this by assigning them to globals like ` window.SomeContext1 ` and ` window.SomeContext2 ` and then checking whether ` window.SomeContext1 === window.SomeContext2 ` in the console. If they’re not the same, fix that issue on the build tool level. 

###  I am always getting ` undefined ` from my context although the default
value is different

You might have a provider without a ` value ` in the tree:

    
    
    // 🚩 Doesn't work: no value prop  
    
    
    <ThemeContext.Provider>  
    
    
       <Button />  
    
    
    </ThemeContext.Provider>

If you forget to specify ` value ` , it’s like passing ` value={undefined} ` .

You may have also mistakingly used a different prop name by mistake:

    
    
    // 🚩 Doesn't work: prop should be called "value"  
    
    
    <ThemeContext.Provider theme={theme}>  
    
    
       <Button />  
    
    
    </ThemeContext.Provider>

In both of these cases you should see a warning from React in the console. To
fix them, call the prop ` value ` :

    
    
    // ✅ Passing the value prop  
    
    
    <ThemeContext.Provider value={theme}>  
    
    
       <Button />  
    
    
    </ThemeContext.Provider>

Note that the  default value from your ` createContext(defaultValue) ` call
is only used **if there is no matching provider above at all.** If there is a
` <SomeContext.Provider value={undefined}> ` component somewhere in the parent
tree, the component calling ` useContext(SomeContext) ` _will_ receive `
undefined ` as the context value.

[ Previous  useCallback  ](/reference/react/useCallback) [ Next  useDebugValue
](/reference/react/useDebugValue)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useContext(SomeContext) `
  * Usage 
  * Passing data deeply into the tree 
  * Updating data passed via context 
  * Specifying a fallback default value 
  * Overriding context for a part of the tree 
  * Optimizing re-renders when passing o