variable in useState not updating in useEffect callback

Question

I'm having an issue while using useState and useEffect hooks

import { useState, useEffect } from "react";

const counter = ({ count, speed }) => {
    const [inc, setInc] = useState(0);

    useEffect(() => {

        const counterInterval = setInterval(() => {
            if(inc < count){
                setInc(inc + 1);
            }else{
                clearInterval(counterInterval);
            }
        }, speed);

    }, [count]);

    return inc;
}

export default counter;

Above code is a counter component, it takes count in props, then initializes inc with 0 and increments it till it becomes equal to count

The issue is I'm not getting the updated value of inc in useEffect's and setInterval's callback every time I'm getting 0, so it renders inc as 1 and setInterval never get clear. I think inc must be in closure of use useEffect's and setInterval's callback so I must get the update inc there, So maybe it's a bug?

I can't pass inc in dependency ( which is suggested in other similar questions ) because in my case, I've setInterval in useEffect so passing inc in dependency array is causing an infinite loop

I have a working solution using a stateful component, but I want to achieve this using functional component

Answer 1

There are a couple of issues:

1. You're not returning a function from useEffect to clear the interval
2. Your inc value is out of sync because you're not using the previous value of inc.

One option:

const counter = ({ count, speed }) => {
    const [inc, setInc] = useState(0);

    useEffect(() => {
        const counterInterval = setInterval(() => {
            setInc(inc => {
                if(inc < count){
                    return inc + 1;
                }else{
                    // Make sure to clear the interval in the else case, or 
                    // it will keep running (even though you don't see it)
                    clearInterval(counterInterval);
                    return inc;
                }
            });
        }, speed);

        // Clear the interval every time `useEffect` runs
        return () => clearInterval(counterInterval);

    }, [count, speed]);

    return inc;
}

Another option is to include inc in the deps array, this makes things simpler since you don't need to use the previous inc inside setInc:

const counter = ({ count, speed }) => {
    const [inc, setInc] = useState(0);

    useEffect(() => {
        const counterInterval = setInterval(() => {
            if(inc < count){
                return setInc(inc + 1);
            }else{
                // Make sure to clear your interval in the else case,
                // or it will keep running (even though you don't see it)
                clearInterval(counterInterval);
            }
        }, speed);

        // Clear the interval every time `useEffect` runs
        return () => clearInterval(counterInterval);

    }, [count, speed, inc]);

    return inc;
}

There's even a third way that's even simpler: Include inc in the deps array and if inc >= count, return early before calling setInterval:

    const [inc, setInc] = useState(0);

    useEffect(() => {
        if (inc >= count) return;

        const counterInterval = setInterval(() => {
          setInc(inc + 1);
        }, speed);

        return () => clearInterval(counterInterval);
    }, [count, speed, inc]);

    return inc;

Answer 2

The issue here is that the callback from clearInterval is defined every time useEffect runs, which is when count updates. The value inc had when defined is the one that will be read in the callback.

This edit has a different approach. We include a ref to keep track of inc being less than count, if it is less we can continue incrementing inc. If it is not, then we clear the counter (as you had in the question). Every time inc updates, we evaluate if it is still lesser than count and save it in the ref. This value is then used in the previous useEffect.

I included a dependency to speed as @DennisVash correctly indicates in his answer.

const useCounter = ({ count, speed }) => {
    const [inc, setInc] = useState(0);
    const inc_lt_count = useRef(inc < count);

    useEffect(() => {
        const counterInterval = setInterval(() => {
            if (inc_lt_count.current) {
                setInc(inc => inc + 1);
            } else {
                clearInterval(counterInterval);
            }
        }, speed);

        return () => clearInterval(counterInterval);
    }, [count, speed]);

    useEffect(() => {
        if (inc < count) {
            inc_lt_count.current = true;
        } else {
            inc_lt_count.current = false;
        }
    }, [inc, count]);

    return inc;
};

Answer 3

The main problems that need to be dealt with are Closures and clearing interval on a condition which depends on props.

You should add the conditional check within the functional setState:

setInc(inc => (inc < count ? inc + 1 : inc));

Also, the clearing interval should happen on unmount.

If you want to add clearInterval on condition (inc < count), you need to save references for the interval id and the increased number:

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const useCounter = ({ count, speed }) => {
  const [inc, setInc] = useState(0);

  const incRef = useRef(inc);
  const idRef = useRef();

  useEffect(() => {
    idRef.current = setInterval(() => {
      setInc(inc => (inc < count ? inc + 1 : inc));
      incRef.current++;
    }, speed);

    return () => clearInterval(idRef.current);
  }, [count, speed]);

  useEffect(() => {
    if (incRef.current > count) {
      clearInterval(idRef.current);
    }
  }, [count]);

  useEffect(() => {
    console.log(incRef.current);
  });

  return inc;
};

const App = () => {
  const inc = useCounter({ count: 10, speed: 1000 });
  return <h1>Counter : {inc}</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));