title: React Hooks + Mobx => Invalid hook call. Hooks can only be called inside of the body of a function component
body: <p>I have a React Native App,
  Here i use mobx ("mobx-react": "^6.1.8") and react hooks.</p>
  
  <p>i get the error: 
  Invalid hook call. Hooks can only be called inside of the body of a function component</p>
  
  <h1>Stores index.js</h1>
  
  <pre><code>import { useContext } from "react";
  import UserStore from "./UserStore";
  import SettingsStore from "./SettingsStore";
  
  
  const useStore = () =&gt; {
    return {
      UserStore: useContext(UserStore),
      SettingsStore: useContext(SettingsStore),
    };
  };
  
  export default useStore;
  </code></pre>
  
  <h1>helper.js OLD</h1>
  
  <pre><code>    import React from "react";
      import useStores from "../stores";
  
      export const useLoadAsyncProfileDependencies = userID =&gt; {
    const { ExamsStore, UserStore, CTAStore, AnswersStore } = useStores();
    const [user, setUser] = useState({});
    const [ctas, setCtas] = useState([]);
    const [answers, setAnswers] = useState([]);
  
    useEffect(() =&gt; {
      if (userID) {
        (async () =&gt; {
          const user = await UserStore.initUser();
          UserStore.user = user;
          setUser(user);
        })();
        (async () =&gt; {
          const ctas = await CTAStore.getAllCTAS(userID);
          CTAStore.ctas = ctas;
          setCtas(ctas);
        })();
        (async () =&gt; {
          const answers = await AnswersStore.getAllAnswers(userID);
          UserStore.user.answers = answers.items;
          AnswersStore.answers = answers.items;
          ExamsStore.initExams(answers.items);
          setAnswers(answers.items);
        })();
      }
    }, [userID]);
  };
  </code></pre>
  
  <h1>Screen</h1>
  
  <pre><code>import React, { useEffect, useState, useRef } from "react";
  import {
    View,
    Dimensions,
    SafeAreaView,
    ScrollView,
    StyleSheet
  } from "react-native";
  import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp
  } from "react-native-responsive-screen";
  
  import { observer } from "mobx-react";
  import useStores from "../../stores";
  import { useLoadAsyncProfileDependencies } from "../../helper/app";
  const windowWidth = Dimensions.get("window").width;
  
  export default observer(({ navigation }) =&gt; {
    const {
      UserStore,
      ExamsStore,
      CTAStore,
      InternetConnectionStore
    } = useStores();
    const scrollViewRef = useRef();
  
    const [currentSlide, setCurrentSlide] = useState(0);
  
    useEffect(() =&gt; {
      if (InternetConnectionStore.isOffline) {
        return;
      }
      Tracking.trackEvent("opensScreen", { name: "Challenges" });
      useLoadAsyncProfileDependencies(UserStore.userID);
    }, []);
  
    React.useEffect(() =&gt; {
      const unsubscribe = navigation.addListener("focus", () =&gt; {
        CTAStore.popBadget(BadgetNames.ChallengesTab);
      });
      return unsubscribe;
    }, [navigation]);
  
    async function refresh() {
      const user = await UserStore.initUser(); //wird das gebarucht?
      useLoadAsyncProfileDependencies(UserStore.userID);
      if (user) {
        InternetConnectionStore.isOffline = false;
      }
    }
  
    const name = UserStore.name;
  
    return (
      &lt;SafeAreaView style={styles.container} forceInset={{ top: "always" }}&gt;
  
      &lt;/SafeAreaView&gt;
    );
  });
  </code></pre>
  
  <p>so now, when i call the useLoadAsyncProfileDependencies function, i get this error.</p>
  
  <p>The Problem is that i call useStores in helper.js</p>
  
  <p>so when i pass the Stores from the Screen to the helper it is working. </p>
  
  <pre><code>export const loadAsyncProfileDependencies = async ({
    ExamsStore,
    UserStore,
    CTAStore,
    AnswersStore
  }) =&gt; {
    const userID = UserStore.userID;
    if (userID) {
      UserStore.initUser().then(user =&gt; {
        UserStore.user = user;
      });
      CTAStore.getAllCTAS(userID).then(ctas =&gt; {
        console.log("test", ctas);
        CTAStore.ctas = ctas;
      });
      AnswersStore.getAllAnswers(userID).then(answers =&gt; {
        AnswersStore.answers = answers.items;
        ExamsStore.initExams(answers.items);
      });
    }
  };
  </code></pre>
  
  <p>Is there a better way? instead passing the Stores. 
  So that i can use this function in functions?</p>