setting the state inside the useEffect with that state as a dependency

Question

Let's say I have this code here:

const [a , setA] = useState(false);
useEffect(() => {
      setA(true);

    setTimeout(()=>{
      setA(false);
    },300);

},[a]);

I have two questions:

1) Will this create an infinte loop (if I'm using that same state as a dependency)?

2) If I set the state in the middle of the useEffect code the component re-render immediately, so when will the rest of the code execute if the component render before we get to it inside the useEffect? When will the setA(false) happen?

Answer 1

If you fix the syntax (setTimeOut needs to be spelled properly), yes, that'll cause an infinite loop.

const App = () => {
    console.log('rendering');
    const [a , setA] = React.useState(false);
    React.useEffect(() => {
          setA(true);

        setTimeout(()=>{
          setA(false);
        },300);

    },[a]);
    return 'foo';
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

If I set the state in the middle of the useEffect code the component re-render immediately, so when will the rest of the code execute if the component render before we get to it inside the useEffect? When will the setA(false) happen?

It'll occur just as it was originally scheduled to - 300-ish milliseconds after the hook originally runs. When the component re-mounts, it will not cancel or change ongoing timeouts that previous renders might have created, unless you've specifically written code to handle that possibility.

1. The component mounts or has setA called
2. The component (re-)renders
3. The effect hook runs
4. If the effect hook eventually calls setTimeout, the timeout callback will run regardless, exactly at the time scheduled, no matter what other code there is - as long as you don't call clearTimeout. If you set state as well as calling setTimeout, that has no effect on the timeout. (which is an important thing to keep in mind - stale closures are a common problem people run into with React)