Как правильно сделать побочные эффекты при рендеринге на функциональных компонентах?

Question

Я прочитал здесь , что побочные эффекты должны go до useEffect, но это немедленно мешает мне вызывать хуки внутри useEffect из-за Правил хуков .

Побочные эффекты go в другом месте (методы жизненного цикла в классах или useEffect в компонентах функций)

Однако мне кажется довольно распространенным, что Child запускает функцию на Parent, например, onClick от дочерней Button. Это onClick, с другой стороны, может иметь побочные эффекты, такие как изменение состояния Parent, которое может иметь побочный эффект при рендеринге как Parent, так и Child.

Вызов этих методов " наивно "только дал мне ошибку" Невозможно обновить компонент (Parent) при рендеринге другого компонента (Child) ", хотя моя цель здесь не состоит в том, чтобы устранить эту ошибку, а получить общие знания о том, как применять побочные эффекты во время рендеринга.

Вот пример побочных эффектов при рендеринге. Я не смог воспроизвести эту ошибку, поэтому я не уверен, что этот подход верен, правда?

import React, { useState } from 'react';

type ButtonProps = {
    color: string;
    onClick: (newCounterValue: number) => void;
};

function Button({ color, onClick }: ButtonProps) {
    const [counter, setCounter] = useState(0);
    return (
        <span style={{ backgroundColor: color }} onClick={() => {
                setCounter(counter + 1);
                onClick(counter + 1);
            }}
        >
            Increase counter </span>
    );
}

function App() {
    const [shouldShowGreen, setShouldShowGreen] = useState(true);
    const [counter, setCounter] = useState(0);
    return (
        <div>
            <span>Counter value: {counter}</span>
            <Button color={shouldShowGreen ? `green` : `blue`}
                onClick={(newCounterValue: number) => {
                    setShouldShowGreen(newCounterValue % 2 === 0);
                    setCounter(newCounterValue);
                }}
            />
        </div>
    );
}