Getting invalid hook call in react native

Question

ExceptionsManager.js:179 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Getting this error in Playbutton component

Playbutton.js

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  View,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
  NativeModules,
} from "react-native";

var deviceHeight = Dimensions.get("window").height;
var deviceWidth = Dimensions.get("window").width;
import useAppleFunction from "../CustomHooks/useAppleFunction";

const PlayButton = () => {
   
  useEffect(() => {
      useAppleFunction();
  }, []);

}

and here is the custom hook useApplefunction.js

import { StyleSheet, Text, View } from "react-native";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";

const useAppleFunction = () => {
  const Playlist = useSelector((state) => state);
  console.log("reduxcheck=",Playlist);

  useEffect(() => {
    runtimer();
  }, []);

  const runtimer = () => {
     console.log("reduxcheck=1",Playlist);
  };
};

export default useAppleFunction;

const styles = StyleSheet.create({});

Answer 1

React's error messages are very informative and some are written passively aggressive to make you feel bad for not reading enough documentation.

The first clue is "Hooks can only be called inside of the body of a function component." , you are calling your custom hook in another hook.
Also, out of the 3 reasons listed, only one seems to match your case and it's #2, you're breaking the rules of react hooks .

So instead of calling your useAppleFunction hook inside useEffect, you should call it at the top level and save the returned value (in your case, nothing) into a variable.

Answer 2

A hook does not need to return anything, thus if useAppleFunction is supposed to be a hook, then this is fine. However, this should not be called inside a useEffect .

This is documented here .

To avoid confusion, it's not supported to call Hooks in other cases:

Do not call Hooks in class components.

Do not call in event handlers.

Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

Since your hook does not return anything, it is sufficient to just call it at the body of your JSX component outside of the useEffect . If your hook should actually return something, then we can destructure this as usual.

Remark: There is not need to use var anymore. It is outdated. I have changed it to const .

Here is how you could fix it.

Playbutton.js which I assume, should be a JSX component.

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  View,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
  NativeModules,
} from "react-native";

import useAppleFunction from "../CustomHooks/useAppleFunction";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;



const PlayButton = () => {
  // since this is a hook, it is not allowed to call it inside a useEffect
  useAppleFunction()
   
  useEffect(() => {
      
  }, []);

  //
}

Answer 3

Yes, the problem is that you are trying to use Dimensions outside the function, and there you got the error.
Rather than that, you should write your logic only after imports .

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  View,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
  NativeModules,
} from "react-native";
import useAppleFunction from "../CustomHooks/useAppleFunction";

const PlayButton = () => {
var deviceHeight = Dimensions.get("window").height;
var deviceWidth = Dimensions.get("window").width;
   
  useEffect(() => {
      useAppleFunction();
  }, []);

}