how to get an useEffect inside a function in React?

Question

I'm trying to make an countdown website for a project. I want that the countdown is triggered by a button. I'm using React but i keep getting this error

React Hook "useEffect" is called in function "countdown" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter

I'm pretty new to react, can somebody give me some advice to fix the problem ?

the code:

import './App.css';
import React, { useEffect, useState } from 'react';

function App() {
  const time = 20;
  const [count, setCount] = useState(time);

  const startCount = () => {
    useEffect(() => {
      if (count > 0) {
        setTimeout(() => setCount(count - 1), 1000);
      } else {
        setCount('Times up');
      }
    });
  };

  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={startCount}> start </button>
      <button> pauze </button>
    </div>
  );
}

export default App;

useEffect enables you to run something whenever the the component is rendered or when a state changes. Having that inside of a function that is called on click makes it useless. useEffect should call other functions, but should never be called from within a function. — Emiel Zuurbier
– Emiel Zuurbier, Commented Apr 6, 2021 at 19:34
Does this answer your question? Implementing a countdown timer in React with Hooks — Emile Bergeron
– Emile Bergeron, Commented Apr 6, 2021 at 21:07

Techuila · Accepted Answer · 2021-04-06 19:50:34Z

You can use setInterval instead of using setTimout

Fix your code to this:

import './App.css';
import React, { useEffect, useState } from 'react';

function App() {
  const time = 20;
  const [count, setCount] = useState(time);
  const [isStart, setIsStart] = useState(false);


    useEffect(() => {
      if (isStart) {
        const timer = setInterval(() => {
          if (count > 0) {
            setCount(count - 1)
          } else {
            setCount('Times up');
            clearInterval(timer);
          }
        }, 1000);
      }
    }, [isStart]);


  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={() => setIsStart(true)}> start </button>
      <button> pauze </button>
    </div>
  );
}

export default App;

You're trying to add useEffect inside a plain javascript function, that is why it throws an error that the useEffect you called is in a function that is not a React function component.

LWang · Accepted Answer · 2021-04-06 19:32:01Z

1

useEffect should not be put inside a function. You do not need that start count function. onClick can update a state, and let useEffect listen to the change of that state.

answered Apr 6, 2021 at 19:32

LWang

951 gold badge1 silver badge10 bronze badges

Comments

Rehan Sattar · Accepted Answer · 2021-04-06 19:33:39Z

0

Rules for hooks:

✅ Don’t call Hooks from regular JavaScript functions.

✅ Call Hooks from React function components.

✅ Call Hooks from custom Hooks.

You are calling hook (useEffect) from a plane javascript function which is against the rules of hooks.

answered Apr 6, 2021 at 19:33

Rehan Sattar

4,1154 gold badges16 silver badges22 bronze badges

Comments

Josh · Accepted Answer · 2021-04-06 19:38:08Z

0

You should not call hooks in plain js functions, you can solve your issue like this

import './App.css';
import React, { useEffect, useState } from 'react';

function App() {
  const time = 20;
  const [count, setCount] = useState(time);
  const [start, setStart] = useState(false)

  useEffect(() => {
    if (start) {
      if (count > 0) {
        setTimeout(() => setCount(count - 1), 1000);
      } else {
        setCount('Times up');
      }
    }

  }, [count, start])

  const startCount = () => {
    setStart(true)
  }

  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={startCount}> start </button>
      <button> pauze </button>
    </div>
  );
}

export default App;

answered Apr 6, 2021 at 19:38

Josh

8415 silver badges9 bronze badges

3 Comments

Techuila Over a year ago

This will cause an infinite loop, because the useEffect is listening the count state and executes again the setCount in a 1 second timeout.

Josh Over a year ago

@Techuila no it would not, please check the code sandbox here, also check the console to see the update log. codesandbox.io/s/ecstatic-almeida-90qky?file=/src/App.js

Josh Over a year ago

@Techuila no worries. Please revert the downvote if it was from you. Thanks

Iwan Cergey · Accepted Answer · 2022-02-19 16:57:09Z

0

useEffect hook don't use in any child function of body component function

import React, { useEffect, useState, useCallback } from 'react';
function App() {
  const [count, setCount] = useState();
  useEffect(() => {
    if (count > 0) {
      setTimeout(() => setCount(count - 1), 1000);
    } else {
      setCount('Times up');
    }
  }, [count]);
  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(20)}> start </button>
      <button> pauze </button>
    </>)
}
export default App;

answered Feb 19, 2022 at 16:57

Iwan Cergey

11 bronze badge

Collectives™ on Stack Overflow

how to get an useEffect inside a function in React?

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related