Найти баг в компоненте счетчика

Тут либо есть баг, либо что-то не так с кодом.

import { useEffect, useReducer, useRef, useState } from 'react';
import './App.css';

//Что не так?
/////////////////////////////////
const Counter = () => {
    const count = useRef(0); // Используем useRef для хранения значения
    const renderCount = useRef(0); // Счетчик для отслеживания рендеров

    useEffect(() => {
        renderCount.current += 1; // Увеличиваем счетчик рендеров
    });

    const handleIncrement = () => {
        count.current += 1;
        console.log(`Current Count: ${count.current}`); // Лог текущего значения
    };

    const handleReset = () => {
        count.current = 0;
        console.log('Count reset'); // Лог сброса
    };

    return (
        <div style={{ marginBottom: 50 }}>
            <h1>Счетчик: {count.current}</h1>
            <button onClick={handleIncrement}>Увеличить</button>
            <button onClick={handleReset}>Сбросить</button>
            <p>Количество рендеров: {renderCount.current}</p>
            <hr />
        </div>
    );
};

Оставьте комментарий