Обнуление счётчика при переключении страницы

Условие

Необходимо изменить поведение так, чтобы при каждом нажатии на кнопку «toggle page» внутренний счётчик компонента Counter возвращался к нулю. Сейчас значение счётчика хранится в дочернем компоненте и сохраняется при смене свойства page, поэтому требуется добавить логику сброса состояния, используя хуки React.

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

const ClickInfo: React.FC<{ clicks: number }> = ({ clicks }) => {
    return <p>Clicked: {clicks}</p>;
};

export const Counter = () => {
    const [clicks, setClicks] = useState(0);
    const increase = () => {
        setClicks((prev) => prev + 1);
    };

    return (
        <div>
            <button onClick={increase}>Click me!</button>
            <ClickInfo clicks={clicks} />
        </div>
    );
};

const Page: FC<{ page: string }> = ({ page }) => {
    return (
        <div>
            page: {page}
            <Counter />
        </div>
    );
};

export const SwitchView = () => {
    const [currentView, setCurrentView] = useState<"one" | "two">("one");

    return (
        <>
            <button
                onClick={() =>
                    setCurrentView((prev) => (prev === "one" ? "two" : "one"))
                }
            >
                toggle page
            </button>
            <Page page={currentView} />
        </>
    );
};

``

Ответ

Простой сброс — привязать идентичность Counter к page через key: при смене страницы React создаст новый экземпляр с начальным состоянием 0.

В Page замените <Counter /> на <Counter key={page} />. Если по условию нужен именно hook-сброс без remount, передайте page в Counter и добавьте useEffect(() => setClicks(0), [page]). Второй вариант сохраняет остальные ресурсы компонента, но обновляет state после commit; key сразу задаёт новое состояние.