<Alterion.Dev>•3y ago

Hindsight – 13-13 May 16

How do you get around the fact that a setInterval completely screws up references to state when used in a useEffect? In this code, console.log(frame) always shows 0, but the state does update correctly in the render, and the setFrame works only when it's using a functional update...

import { useState, useEffect } from "react";

export default function App() {
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    const interval = setInterval(
      () => {
        console.log(frame);
        setFrame((oldValue) => oldValue + 1);
      },
      50,
      frame
    );
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <p>{frame}</p>
    </>
  );
}

import { useState, useEffect } from "react";

export default function App() {
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    const interval = setInterval(
      () => {
        console.log(frame);
        setFrame((oldValue) => oldValue + 1);
      },
      50,
      frame
    );
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <p>{frame}</p>
    </>
  );
}

17 Replies

<Alterion.Dev>•3y ago

(As you can see I tried adding frame to the setInterval arguments so it would maybe pass the value correctly but it doesn't work (and adding an argument to the function, it's also never updating)

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

"called" interval?

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

setInterval starts the interval on its own...

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

Yes, that was the issue I was trying to resolve without having to cleanup and re-do the interval every 50ms in this case which clearly isn't possible with React

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

Not without ac ustom hook

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

If frame is in the dependency array then the interval gets recreated from scratch every 50ms which sounds like horrible optimisation I did actually get some answers from https://discord.com/channels/102860784329052160/103696749012467712/975761012206735360 I'm not really happy with the answers but it's because React, not because of the people answering 😄

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

To be honest I'd rather use Solid... where you can predictably do this and it works:

<Alterion.Dev>•3y ago

¯\_(ツ)_/¯ But thanks for trying to help, I just asked in many places and got various answers 😄

Unknown User•3y ago

Message Not Public

<Alterion.Dev>•3y ago

Yep. The custom hook is gonna be the secret for timeouts and intervals for sure

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/975747806469963819