setInterval 和 setState 中的 useEffect 错误

Question

i have tried useEffect function of React

useEffect(() => {
    setInterval(() => {
        const time =
            Date.parse(untilDeadline.deadline) - Date.parse(new Date());
        setuntilDeadline((prevValue) => {
            return {
                ...prevValue,
                seconds: Math.floor((time / 1000) % 60),
                minutes: Math.floor((time / 1000 / 60) % 60),
                hours: Math.floor((time / (1000 * 60 * 60)) % 24),
                days: Math.floor(time / (1000 * 60 * 60 * 24)),
            };
        });
    }, 1000);
}, []);

this was crashing without [] in the end why?

Answer 1

The reason it was crashing is because you never clean up the setInterval call. So, every time the component re-renders (via the setuntilDeadline call for instance), the effect would run again. What the [] indicate is that the effect should only run on mount and then clean itself up on unmount (as it's an empty dependency array).

Additionally, you should clean up the setInterval call regardless of the dependency array in order to make sure that you don't have memory leaks and other performance issues.

useEffect(() => {
    const intervalId = setInterval(() => {
        const time =
            Date.parse(untilDeadline.deadline) - Date.parse(new Date());
        setuntilDeadline((prevValue) => {
            return {
                ...prevValue,
                seconds: Math.floor((time / 1000) % 60),
                minutes: Math.floor((time / 1000 / 60) % 60),
                hours: Math.floor((time / (1000 * 60 * 60)) % 24),
                days: Math.floor(time / (1000 * 60 * 60 * 24)),
            };
        });
    }, 1000);
    return ()=>{
       clearInterval(intervalId);
    }
}, []);

Answer 2

The empty array says to only run this once. Otherwise it might cause an infinite loop of re-renders.

Answer 3

You need that to only run once, and passing an empty array tells useEffect that there are no dependencies for the useEffect hook so it doesn't need to rerun on each render, and a setInterval would cause a rerender.

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn't depend on any values from props or state, so it never needs to re-run. This isn't handled as a special case — it follows directly from how the dependencies array always works.

If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model, there are usually better solutions to avoid re-running effects too often. Also, don't forget that React defers running useEffect until after the browser has painted, so doing extra work is less of a problem.

https://reactjs.org/docs/hooks-effect.html