Why doesn't state update in functional component

I created a simple component and i have problem with state update. I know correct solution, but my question is: Why this code doesn't work?

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

import * as React from "react";
import {useEffect, useState} from "react";

type CountdownProps = {
    start: number;
}

export const Countdown: React.FunctionComponent<CountdownProps> = ({start}: CountdownProps) => {
    const [seconds, setSeconds] = useState<number>(start);

    useEffect(() => {
        setInterval(() => setSeconds(seconds - 1), 1000);
    }, []);

    return (<>{seconds}</>);
};

<!-- end snippet -->

This is a known issue with React hooks when it comes to useInterval that Dan talked about in one of his blog posts in Overreacted

> The problem is that useEffect captures the the initial value passed to CountDown initValue from the first render. We never re-apply the effect so the closure in setInterval always references the initValue from the first render, and initValue - 1 is always initValue.

Fun fact
> You can actually check that the interval is actually updating every second by adding a console.log to the statement but it's always getting initValue.
Try it out here https://repl.it/repls/MedicalMealyPentagon

For a solution, please read the article above.

Into the setTimeout or setInterval, you have not accessed to the global context and you have to call the seconds callback function which will give you the latest value and you need to return new seconds value as below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import * as React from "react";
import {useEffect, useState} from "react";

type CountdownProps = {
    start: number;
}

export const Countdown: React.FunctionComponent<CountdownProps> = ({start}) => {
    const [seconds, setSeconds] = useState<number>(start);

    useEffect(() => {
        setInterval(() => setSeconds(preSeconds => preSeconds - 1), 1000);
    }, []);

    return (<>{seconds}</>);
};

<!-- end snippet -->

The problem is that the value of seconds is never updated in the fonction you provide to setInterval. Your function is run every 1000ms but the value does not change because seconds in the provided function is never updated.

Instead of setInterval you could use setTimeout and have useEffect depend on seconds like this:

import React, { useEffect, useState } from "react";

export default function App() {
  const [seconds, setSeconds] = useState(100);

  useEffect(() => {
    setTimeout(() => setSeconds(seconds - 1), 1000);
  }, [seconds]);

  return <>{seconds}</>;
}

You need to add constructor value to usestate(I Added 0)
Also the second argument of useEffect should be seconds

Also i change React.FunctionComponent to React.FC

The more information about second argument:

> The second argument to React's useEffect hook is an array of
> dependencies for your useEffect callback. When any value in that array
> changes, the effect callback is re-run.

import * as React from "react";
import {useEffect, useState} from "react";

type CountdownProps = {
    start: number;
}

const Countdown: React.FC<CountdownProps> = ({start}: CountdownProps) => {
    
    start = 0;
    const [seconds, setSeconds] = useState<number>(start);

    useEffect(() => { const id = setInterval(() => { setSeconds(seconds - 1) }, 1000); return () => clearInterval(id); }, [seconds])

    return (<>{seconds}</>);
};

export default Countdown;