Breaking News: Grepper is joining You.com. Read the official announcement!

useEffect time elapsed

Different Dove answered on August 20, 2021 Popularity 5/10 Helpfulness 1/10

answer useEffect time elapsed

useEffect time elapsed

Comment

const Clock = ({ dispatch, inProgress, ticksElapsed }) => {
  React.useEffect(() => {
    const progressTimer = setInterval(function () {
      inProgress && dispatch({ type: 'CLOCK_RUN' });
    }, 500);
    return () =>
      //inprogress is stale so when it WAS true
      //  it must now be false for the cleanup to
      //  be called
      inProgress && clearInterval(progressTimer);
  }, [dispatch, inProgress]);

  return <h1>{ticksElapsed}</h1>;
};

const App = () => {
  const [inProgress, setInProgress] = React.useState(false);
  const [ticksElapsed, setTicksElapsed] = React.useState(0);
  const dispatch = React.useCallback(
    () => setTicksElapsed((t) => t + 1),
    []
  );
  return (
    <div>
      <button onClick={() => setInProgress((p) => !p)}>
        {inProgress ? 'stop' : 'start'}
      </button>
      <Clock
        inProgress={inProgress}
        dispatch={dispatch}
        ticksElapsed={ticksElapsed}
      />
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: elapsed javascript time use-effect

Link to this answer
Share Copy Link

Contributed on Aug 20 2021

Different Dove

0 Answers Avg Quality 2/10

useEffect time elapsed

Contents

More Related Answers

useEffect time elapsed

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.