<main></main>
const { useState, useEffect, useRef } = React;

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

function useTimer() {
  const [ ticks, setTicks ] = useState(0);
  useInterval(function() {
    setTicks(ticks + 1);
  }, 1000);
  return ticks;
}

function App(props) {
  const ticks = useTimer();
  return (
    <div>
      <p>Hello World {ticks}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('main'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js