Почему у меня перерендеривается компонент, в котором нет ни пропсов, ни состояния?

Question

[frogqwetr]

Почему у меня перерендеривается компонент, в котором нет ни пропсов, ни состояния?
У меня есть страница Product, содержащая в себе форму для создания
отзывов(FormCreateReview) к товару и сами отзывы(ReviewsList), также есть кнопка, при
нажатии на которую эти самые отзывы и показываются. Но почему - то вместе с
рендером отзывов, перерендеривается и форма, в которой нет ничего кроме jsx. Из-за чего
это происходит, как это решить?
Вывод в консоли, когда нажимаю на кнопку "посмотреть отзывы":
RENDER PRODUCT CARD
RENDER FORM
RENDER REVIEW LIST

const Product = () => {
    const [isShowReviewsProduct, setIsShowReviewsProduct] = useState(false)

    console.log("RENDER PRODUCT CARD")

    const toggleIsShowReviewsProduct = () => {
        setIsShowReviewsProduct(!isShowReviewsProduct)
    }

    const reviewsList = isShowReviewsProduct ? <ReviewsList idProduct={idProduct}  /> : null

    return (
        <div>
            <h2>Page Product</h2>
            <FormCreateReview />
            <div className="reviews">
                <button onClick={toggleIsShowReviewsProduct}>Показать отзывы</button>
                {reviewsList}
            </div>
        </div>
    )
}

const FormCreateReview = () => {


    console.log("RENDER FORM ")

    return  (

        <div className="form-reviews">
            <h4>Form Create Review...</h4>
            <input type="text"/>
            <button >Добавить отзыв</button>
        </div>
    )
}

Answer 1

[Alexandroppolus]

const FormCreateReview = React.memo(() => {
   ... 
});

Answer 2

[insighter]

Меняется состояние родительского компонента, вызывается повторный рендер всех его детей. Все правильно.