Fetch and setInterval react hooks problem

Question

I recently used hooks with React to fetch data from server but i'm facing a problem with hooks. The code seems correct but it look like the useEffect isn't called at first time but 3 seconds after with the setInterval. I have blank table for 3 seconds before it appear. I want to directly show the data and call it 3 seconds later.

What is the correct way to use it?

const [datas, setDatas] = useState([] as any);

useEffect(() => {
  const id = setInterval(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(URL);
        const json = await res.json();
        setDatas(jsonData(json));
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, TIME)

  return () => clearInterval(id);
}, [])

Drew Reese · Accepted Answer · 2020-09-30 19:37:02Z

8

You need to invoke fetchData once initially outside the interval. Define fetchData outside the interval.

useEffect(() => {
  // (1) define within effect callback scope
  const fetchData = async () => {
    try {
      const res = await fetch(URL);
      const json = await res.json();
      setDatas(jsonData(json));
    } catch (error) {
      console.log(error);
    }
  };
    
  const id = setInterval(() => {
    fetchData(); // <-- (3) invoke in interval callback
  }, TIME);

  fetchData(); // <-- (2) invoke on mount

  return () => clearInterval(id);
}, [])

answered Sep 30, 2020 at 19:37

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mikael Lirbank Over a year ago

You have a dangling promise here. If fetchData() take a while, they will start to pile up and call multiple fetchData() in parallel.

Drew Reese Over a year ago

@MikaelLirbank Yes, I suppose long-running fetchData calls can pile up in this basic example. If concurrent fetches are a problem it's trivial to handle, e.g. cancel preceding in-flight requests, block new requests, etc.

Guilherme Trivilin · Accepted Answer · 2020-10-24 14:30:08Z

-1

With React Hooks:

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() => { if (seconds === 60) stopCounter() }, [seconds])

  const startCounter = () => interval.current = setInterval(() => {
    setSeconds(prevState => prevState + 1)
  }, 1000)

  const stopCounter = () => clearInterval(interval.current)

answered Oct 24, 2020 at 14:30

Guilherme Trivilin

8858 silver badges7 bronze badges

Collectives™ on Stack Overflow

Fetch and setInterval react hooks problem

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related