[React] React-use

corgiLoaf·2023년 6월 14일
0
/* Demo.js */
import * as React from "react";
import { useInterval } from "react-use";

const Demo = () => {
  const [count, setCount] = React.useState(0);
  const [delay, setDelay] = React.useState(1000);
  const [isRunning, setIsRunning] = React.useState(true);

  useInterval(
    () => {
      setCount(count + 1);
    },
    isRunning ? delay : null
  );

  return (
    <div>
      <div>
        delay:{" "}
        <input
          value={delay}
          onChange={(event) => setDelay(Number(event.target.value))}
        />
      </div>
      <h1>count: {count}</h1>
      <div>
        <button onClick={() => setIsRunning(!isRunning)}>
          {isRunning ? "stop" : "start"}
        </button>
      </div>
    </div>
  );
};

export default Demo;
)
profile
삽질하고 기록하기

0개의 댓글