Component is rendering without even use of useEffect and useState

Question

What happening is that I am not using useEffect & useState still it rendering the updated state when I remove item from cart, Is this because of Redux??

I am beginner in react and so far what I learned is when any change happen we use useEffect or useState to update the state. But here i am confused.

const CartScreen = ({ history, match, location }) => {
  const qty = location.search ? Number(location.search.split('=')[1]) : 1
  console.log(qty)

  const cart = useSelector((state) => state.cart)

  const { cartItems } = cart
  console.log(cart)
  console.log("Render again")

  const dispatch = useDispatch()

This is my removeItem handler

 const removeItemHandler = (id) => {
    dispatch(cartRemoveItem(id))
  }

  
  return (
    <div className="CartScreen">
      <div className="CartItem_Container">
        {cartItems.length === 0 ? (
          <p>No item</p>
        ) : (
          cartItems.map((product) => {
            return (
              <>
                <div className="Cart_Card">
                  <div>
                    <img src={product.image} width="70px" height="70px"></img>
                  </div>
                  <div className="Cart_Breif">
                    <p className="CartProduct_Name">
                      {product.name}{' '}
                      <span className="qty">
                        <select
                          value={product.qty}
                          onChange={(e) => {
                            dispatch(
                              cartAddItem(
                                product.product,
                                Number(e.target.value)
                              )
                            )
                          }}
                        >
                          {[...Array(product.countInStock).keys()].map((x) => (
                            <option key={x + 1} value={x + 1}>
                              {x + 1}
                            </option>
                          ))}
                        </select>
                      </span>
                    </p>
                    <p className="About_Product">{product.description} </p>

                    <p className="price">
                      ${product.price}{' '}
                      <span className="removeItem" onClick={()=> removeItemHandler(product.product)}>Remove</span>
                    </p>
                  </div>
                </div>
              </>
            )
          })
        )}
      </div>

      <div className="ProceedTo_Checkout"
        onClick={() => {
          history.push('/address')
        }}
      >
        <p>Proceed To CheckOut</p>
      </div>
    </div>
  )
}

export default CartScreen

Answer 1

Your component re-renders because of useSelector. You are most probably updating the store by dispatching cartRemoveItem. useSelector hook compares the latest selector value in redux store with the previous selector value and forces component to be re-rendered if they are different.