/
lyudmleb
/
useref
Обзор
Документация
Войти
/
lyudmleb
/
useref
Код
Запросы
1
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
develop
src/pages/clickTimer/ui/ClicktimerPage.tsx
40 строк
1 KB
Liudmila Lebedeva
finished
22 ноя 2025, 14:53
22 ноя 2025, 14:53
ff9bb37
Код
Авторство
О чём код?
import { memo, useCallback, useRef } from "react"; import { Button, Typography } from "@mui/material"; interface ClickData { startTime: number | null; clickCount: number; } const getTimePassed = (startTime: number | null) => !startTime ? null : (Date.now() - startTime) / 1000; export const ClickTimerPage = memo(() => { const timeRef = useRef<ClickData>({ startTime: null, clickCount: 0, }); const handleClick = useCallback(() => { if (timeRef.current.startTime === null) { timeRef.current.startTime = Date.now(); } console.log(`Count of clicks: ${timeRef.current.clickCount}`); console.log(`Time's passed: ${getTimePassed(timeRef.current.startTime)}`); timeRef.current.clickCount++; }, [timeRef]); return ( <> <Button variant="contained" onClick={handleClick}> Click me! </Button> {/* Покажем, что компонент не перерисовывается */} <Typography> I'm not tracking your clicks. I think, there are{" "} {timeRef.current.clickCount} of them. </Typography> </> ); });