F
F
frogqwetr2022-02-08 12:50:15
React
frogqwetr, 2022-02-08 12:50:15

Why do I have a component that has no props or state rerendered?

Why do I have a component that has no props or state rerendered?
I have a Product page containing a form for creating
reviews (FormCreateReview) for the product and the reviews themselves (ReviewsList), there is also a button, when
you click on which these same reviews are shown. But for some reason, along with the
rendering of reviews, the form is also re-rendered, in which there is nothing but jsx. Why
is this happening, how to solve it?
Console output when I click on the "view reviews" button:
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 the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexandroppolus, 2022-02-08
@frogqwetr

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

@
@insighter, 2022-02-08
_

The state of the parent component changes, and a re-render of all its children is called. Everything is correct.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question