React タイマー

code:jsx

import React, {

useEffect,

useState,

} from "react";

export function App() {

useEffect(() => {

// ここでカウントアップを開始する

const timer = setInterval(() => {

setCount(

(prevCount) => prevCount + 1

);

}, 1000);

// 👇 このコンポーネントが画面から消えた時に実行される

return () => {

// ここでタイマーを解除

clearInterval(timer);

};

}, []);

return <div>{count}</div>;

}

code:jsx

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

import { createRoot } from "react-dom/client";

function secondsToMs(d) {

const minutes = Math.floor(d / 60);

const seconds = Math.floor(d % 60);

return `${minutes.toString().padStart(2, "0")}:${seconds

.toString()

.padStart(2, "0")}`;

}

export default function App() {

useEffect(() => {

const timer = setInterval(() => {

setTime((time) => time + 1);

}, 1000);

return () => clearInterval(timer);

}, []);

return (

<div className="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">

<div className="timer text-center text-6xl font-bold text-gray-900 dark:text-gray-100">

{secondsToMs(time)}

</div>

</div>

</div>

);

}

export const root = createRoot(document.getElementById("root"));

root.render(<App />);