Dispatch works every other time in children in a loop in useeffect

I recently start learning React. I have problem when use dispatch in UseEffect, which is inside the child in the loop. I can’t publish all project, but below piece of code:

On the home page online store products are displayed. In a separate component there is a small card that is displayed using the map loop:

<Row className='mt-20'>
  {products.map(product => (
    <ProductItem key={product._id} product={product} history={history} />
  ))}
</Row>

Child component code:

const ProductItem = ({ product, history }) => {
    const dispatch = useDispatch()

    const reviewList = useSelector(state => state.reviewList)
    const { reviews } = reviewList

    useEffect(() => {
        let clean = false

        if (!clean) dispatch(listReviewsDetailsByProductId(product._id))

        return () => (clean = true)
    }, [dispatch, product])

    const productRate =
        reviews.reduce((acc, item) => item.rating + acc, 0) / reviews.length || 0

    return (
        <Col xl='3' sm='6'>
            <Card>
                <Card.Body>
                    <div
                        className={'product-img position-relative ' + styles.wrapperImage}
                    >
                        <Link to={'/product/' + product.slug}>
                            {product.images[0] && (
                                <img
                                    src={product.images[0].path}
                                    alt=''
                                    className='mx-auto d-block img-fluid'
                                />
                            )}
                        </Link>
                    </div>
                    <div className='mt-4 text-center'>
                        <h5 className='mb-3 text-truncate'>
                            <Link to={'/product/' + product.slug} className='text-dark'>
                                {product.name}{' '}
                            </Link>
                        </h5>
                        {reviews && (
                            <div className='mb-3'>
                                <StarRatingsCustom rating={productRate} size='14' />
                            </div>
                        )}
                        <ProductPrice price={product.price} newPrice={product.newPrice} />
                    </div>
                </Card.Body>
            </Card>
        </Col>
    )
}

I use dispatch action to get reviews for a specific product from the server and then calculate the rating and display it. Unfortunately, it works every other time, the rating appears, then disappears. I would be grateful for your help!

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in SingleProduct (created by Context.Consumer)
in Route (at Root.jsx:96)

74 thoughts on “Dispatch works every other time in children in a loop in useeffect”

Leave a Comment