title: When Calling a Function Defined from useContext I am Receiving an Error Stating it is Not a Function
body: <p>I'm currently working on a web app for the first time and a lot of it is still very new to me. I'm running into some problems with functions that I have imported via Context to child components.</p>
  <p><strong>So the ideal workflow goes as follows:</strong></p>
  <ol>
  <li><p>A user accesses the app and is asked to log in.</p>
  </li>
  <li><p>The user successfully logs in and the app retrieves their user
  profile via a series API calls.</p>
  </li>
  <li><p>During these API calls I also call upon two context functions I
  destructured for the component.</p>
  <p>One context function sets the state of a &quot;loggedIn&quot; value to true</p>
  <p>Another context function sets the state of a &quot;userState&quot; value to
  contain the userProfile object.</p>
  <p>These values are also set into local storage under the same name.</p>
  </li>
  <li><p>From here the states have been updated so the page should re-render
  and utilize the newly available information from the global state.</p>
  </li>
  <li><p>Subsequently, the user should be able to refresh the page and not
  need to re-login so at the start of the component I also call the
  context functions and pass in the value that was stored in local
  storage to keep them up to date.</p>
  </li>
  </ol>
  <p><strong>What is actually happening:</strong></p>
  <p>To provide further context, my web app has multiple &quot;tabs&quot; in the header that when selected will render a different component inside the parent. This is where the problem is occurring. The above workflow seems to be working fine even when refreshing but when I click on a tab whose component tries to call the context function I get an error stating TypeError: functionName is not a function. Here is an image of the error that comes up:
  <a href="https://i.stack.imgur.com/G7I2n.png" rel="nofollow noreferrer">Not a Function Error</a></p>
  <p>I haven't been able to figure out why this is an issue and could really use a hand figuring this out as I would much rather have the ability to automatically re-render my components when data changes rather than needing to call a function to manually force a re-render for all of my components. Below are some of my code snippets to try and help illustrate the problem better.</p>
  <pre><code>//**************************
  //GlobalState.js
  //**************************
  
  import React, {createContext, useReducer} from 'react';
  import AppReducer from './AppReducer';
  
  const initialState = {
      loggedIn                : false,
      userState               : &quot;undefined&quot;,
      selectedTab             : &quot;yourProfile&quot;
  }
  
  export const GlobalContext = createContext(initialState);
  
  export const GlobalProvider = ({children}) =&gt; {
      const [state, dispatch] = useReducer(AppReducer, initialState);
  
      function logInContext(response){
          console.log(&quot;logInContextCalled&quot;)
          dispatch({
              type    : 'LOG_IN',
              payload : (response)
          });
      }
  
      function getUPContext(response){
          console.log(&quot;getUPContext called&quot;)
          dispatch({
              type    : 'GET_UP',
              payload : (response)
          })
      }
  
      function tabContext(response){
          dispatch({
              type    : 'SET_TAB',
              payload : (response)
          })
      }
  
      return(
          &lt;GlobalContext.Provider value = {{loggedIn : state.loggedIn, logInContext, userState : state.userState, getUPContext, selectedTab : state.selectedTab, tabContext}}&gt;
              {children}
          &lt;/GlobalContext.Provider&gt;
      )
  }
  
  //**************************
  //AppReducer.js
  //**************************
  
  import React from 'react';
  
  export default (state, action) =&gt; {
      switch(action.type){
          case 'LOG_IN':{
              localStorage.setItem(&quot;loggedIn&quot;, action.payload)
              return {...state, loggedIn: action.payload};
          }
          case 'GET_UP' :{
              localStorage.setItem(&quot;userState&quot;, JSON.stringify(action.payload))
              return {...state, userState: action.payload};
          }
          case 'SET_TAB' :{
              localStorage.setItem(&quot;selectedTab&quot;, action.payload)
              return{...state, selectedTab: action.payload}
          }
      }
  }
  
  //**************************
  //your-profile.js
  //**************************
  
  import styles from &quot;../styles/yourProfile.module.css&quot;
  import Link from 'next/link'
  import Image from 'next/image'
  import qrCode from '../public/frame.png'
  import { GlobalContext } from &quot;../pages/context/GlobalState.js&quot;
  import AppReducer from '../pages/context/AppReducer'
  import {useContext, useEffect, useState} from 'react'
  
  //let loggedIn;
  //let userState;
  
  export default function YourProfile(){
  
      const {logInContext, getUPContext, loggedIn, userState, selectedTab, tabContext} = useContext(GlobalContext);
  
      //let update = forceUpdate();
  
  //THESE FUNCTIONS THROW THE NOT A FUNCTION ERROR WHEN CALLED. ONLY OCCURS WHEN SELECTING THE TAB TO RENDER. NOT CURRENTLY HAPPENING ON REFRESH.
      useEffect(() =&gt; {
          console.log(&quot;use effect called&quot;)
          logInContext(localStorage.getItem(&quot;loggedIn&quot;))
          getUPContext(JSON.parse(localStorage.getItem(&quot;userState&quot;)))
          //update()
      }, [])
  
  
      if(loggedIn)console.log(&quot;USER IS LOGGED IN&quot;)
  
      console.log(&quot;Value of logged in and userState inside your-Profile&quot;)
      console.log(loggedIn)
      console.log(userState)
  
      if(loggedIn &amp;&amp; userState){
      return(
          //render something
      )
      }
      else{
          return(
              //Render something elsse
          )
      }
  }
  
  //**************************
  //_app.js
  //**************************
  
  import '../styles/globals.css'
  import {GlobalProvider} from './context/GlobalState'
  
  function MyApp({ Component, pageProps }) {
    return(
      &lt;GlobalProvider&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/GlobalProvider&gt;
    );
  }
  
  export default MyApp
  </code></pre>