Invalid Hook Call For React Native

Question

I am having an Invalid Hook Error in RN. I am using a button click event handler to execute a setInterval function for a countdown timer.

Error: 'Hooks can only be called inside the body of a function component. (...)'

My code:

import { Button, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Ionicons } from '@expo/vector-icons'
import { AntDesign } from '@expo/vector-icons'

    export default function MenuBar() {

  const [time, SetTime] = useState(10);

  const startTime = () => {

    useEffect(() => {
      const interval = setInterval(() => {
       if(time > 0) {
         SetTime(time => time - 1);
       } else {
          SetTime(time => time + 10);
       } 
      }, 1000);
      return () => clearInterval(interval);
    }, []); 
  }

  return (
    <View style={styles.container}>
      <Button color="orange" onPress={startTime} title="Start Time!!"></Button>
      <View style={styles.menu}>
        
        <TouchableOpacity>
          <AntDesign style={[styles.button, styles.exitBtn] } name="logout" size={24} color="white" />
        </TouchableOpacity>
        
        <TouchableOpacity>
          <AntDesign style={styles.button} name="questioncircleo" size={24} color="white" />
        </TouchableOpacity>

        <Text style={styles.timer}>{time}</Text>

        <TouchableOpacity>
          <AntDesign style={styles.button} name="picture" size={24} color="white" />
        </TouchableOpacity>

        <TouchableOpacity>
          <AntDesign style={styles.button} name="sound" size={24} color="white" />
        </TouchableOpacity>

      </View>
    </View>
  )
}

Answer 1

You cannot call a hook inside of another function unless that function is a React Component.

As you want to start the timer when pressing a button you don't need to listen to side effects and therefore don't need to call useEffect, and just start the timer when pressing the button.

You do need to clear the timer when unmounting the component. For this you will need a useEffect , as React internally will trigger the useEffect cleanup function.

I would suggest something like this:

export default function MenuBar() {
  const interval = useRef(null)
  const [time, setTime] = useState(10);

  const startTime = () => {
    if (interval.current) {
      // Making sure not to start multiple timers if one
      // has already started
      clearInterval(interval.current);
    }
    interval.current = setInterval(() => {
      if (time > 0) {
        setTime(time => time - 1);
      } else {
        setTime(time => time + 10);
      }
    }, 1000);
  }

// only use useEffect when unmounting the component
// and calling the cleanup function
  useEffect(() => {
    return () => {
      if (interval.current) {
        return clearInterval(interval.current);
      }
    };
  }, []);

  return (
// rest of component
)