React state reference within onClick is wrong - possible closure issue?

Here is a stripped down version of a React component that I have. It is a home screen with an intro animation, that will automatically end and fade out after a timeout, but can also be skipped by the user.

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

export function Home() {
  const [introEnded, setIntroEnded] = useState(false);
  
  // function to end intro animation
  function endIntro() {
    console.log(introEnded); // THIS IS WRONG THE SECOND TIME FUNCTION IS CALLED
    if (!introEnded) {
      setIntroEnded(true);
      // do various other stuff
    }
    // do various other stuff
  }

  // if user does not interact, intro ends automatically
  useEffect(() => {
    setTimeout(function() {
      endIntro();
    }, 4000);
  }, []);

  // user can skip intro on click
  return (
    <div>
      <div onClick={endIntro}>Skip Intro</div>
    </div>
  );
}

The problem is, after a user skips, when the timeout kicks in and calls endIntro() a second time, the introEnded state is wrong. I have clearly set it to true the first time endIntro() was called, yet the second call to endIntro() seems to reference an older state.

Research tells me it's some sort of closure issue, but I can't work out the solution.

What's going on, and how do I fix this? Thanks!

Yes, this is a Javascript closure issue. the value of variable introEnded is false when useEffect is called and this's not avoidable. In order to achieve this goal, we need to write some manual code like below.

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

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

export function Home() {
  const [introEnded, setIntroEnded] = useState(false);
  const [elapsed, setElapsed] = useState(0);
  const start = React.useMemo(() => {
    return new Date().getTime();
  }, []);

  // function to end intro animation
  const endIntro = React.useCallback(() => {
    console.log(introEnded); // THIS IS WRONG THE SECOND TIME FUNCTION IS CALLED
    if (!introEnded) {
      setIntroEnded(true);
      // do various other stuff
    }
    // do various other stuff
  }, [introEnded]);

  // if user does not interact, intro ends automatically
  useEffect(() => {
    // console.log(elapsed);
    let timerId = -1
    if (4000 > elapsed) {
      timerId = setTimeout(function() {
        endIntro();
      }, 4000 - elapsed);
    }

    return () => {
      setElapsed(new Date().getTime() - start);
      if (timerId > 0) clearTimeout(timerId);
    };
  }, [elapsed, endIntro, start]);

  // user can skip intro on click
  return (
    <div>
      <div onClick={endIntro}>Skip Intro</div>
    </div>
  );
}

<!-- end snippet -->

I think this is the general use case and we can write our custom hook.

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

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

// custom hook
const useInterruptibleTimeout = (timeout, handler) => {
  const [elapsed, setElapsed] = useState(0);
  const start = React.useMemo(() => {
    return new Date().getTime();
  }, []);

  useEffect(() => {
    // console.log(elapsed);
    let timerId = -1
    if (timeout > elapsed) {
      timerId = setTimeout(function() {
        handler();
      }, timeout - elapsed);
    }

    return () => {
      setElapsed(new Date().getTime() - start);
      if (timerId > 0) clearTimeout(timerId);
    };
  }, [elapsed, handler, start, timeout]);


}

export function Home() {
  const [introEnded, setIntroEnded] = useState(false);

  // function to end intro animation
  const endIntro = React.useCallback(() => {
    console.log(introEnded); // THIS IS WRONG THE SECOND TIME FUNCTION IS CALLED
    if (!introEnded) {
      setIntroEnded(true);
      // do various other stuff
    }
    // do various other stuff
  }, [introEnded]);

  useInterruptibleTimeout(4000, endIntro)

  // user can skip intro on click
  return (
    <div>
      <div onClick={endIntro}>Skip Intro</div>
    </div>
  );
}

<!-- end snippet -->

I hope this code helpful to you

You don't have to call the entire function inside useEffect you can just update your intro state.

Also you might need to return a cleanup function that will reset your state back to false at the end of your useEffect which will simulate the componentWillUnmount(). Read more here cleaning up

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

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

const App = () => {
  const [introEnded, setIntroEnded] = React.useState(false);
  // function to end intro animation
  function endIntro() {
    setIntroEnded(true)
     // do your other stuff
     console.log('skipped')
  }

  // if user does not interact, intro ends automatically
  React.useEffect(() => {
    // Change state after x second
    setTimeout(function() {
      setIntroEnded(true)
    }, 4000);
    // Clean up and set it back to false
    return () => setIntroEnded(false)
  }, []);

  return (
    <div>
      <div onClick={endIntro}>Skip Intro</div>
      {!introEnded ? <div>Your Intro... This will end after 4 seconds..</div> : <div>Intro Ended... </div>} 
    </div>
  )

}

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

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

<!-- end snippet -->

Some tips you have to implement in your code:

1. clear timeout by returned id when the Home component destroyed.
2. using setState callback instead and checking before calling the function into setTimeout callback.

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

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

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

export function Home() {
  const [introEnded, setIntroEnded] = useState(false);

  // function to end intro animation
  function endIntro() {
    console.log(introEnded); // THIS IS WRONG THE SECOND TIME FUNCTION IS CALLED

    setIntroEnded(() => true);
    // do various other stuff
    // do various other stuff
  }

  // if user does not interact, intro ends automatically
  useEffect(() => {
    const setTimeoutId = setTimeout(() => {
      if (!introEnded) {
        endIntro();
      }
    }, 4000);

    return () => {
      clearTimeout(setTimeoutId);
    };
  }, []);

  // user can skip intro on click
  return (
    <div>
      <div onClick={() => endIntro()}>Skip Intro</div>
    </div>
  );
}

<!-- end snippet -->

Here is an example: https://repl.it/@ali_master/reactSetTimeout