useIntervalWhen

import { useIntervalWhen } from "rooks";
import { useState } from "react";

function App() {
  const [value, setValue] = useState(0);
  const [when, setWhen] = useState(false);

  useIntervalWhen(
    () => {
      setValue(value + 1);
    },
    1000, // run callback every 1 second
    when // start the timer when it's true
  );

  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks: useIntervalWhen example</h1>
      <h2>Value: {value}</h2>
      <button onClick={() => setWhen(true)}> Start interval </button>
    </div>
  );
}

export default App;

import { useIntervalWhen } from "rooks";
import { useState } from "react";

function App() {
  const [value, setValue] = useState(0);
  const [when, setWhen] = useState(false);

  useIntervalWhen(
    () => {
      setValue(value + 1);
    },
    1000, // run callback every 1 second
    when, // start the timer when it's true
    true // no need to wait for the first interval
  );

  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks: useIntervalWhen example</h1>
      <p>
        Notice how the first increment is instantly after interval is enabled.
        If n intervals run, the callback fires n+1 times.
      </p>
      <h2>Value: {value}</h2>
      <button onClick={() => setWhen(true)}> Start interval </button>
    </div>
  );
}

export default App;