Reselect: Reselect + react/redux useSelector() doesn't work as intended

[maxim1006]

https://react-redux.js.org/next/api/hooks#using-memoizing-selectors

Hello,

If I create a _ShopCartList_ component:

`

export default () => {
const cartItems = useSelector(selectShopCartItems);

 console.log("I'm rerendering even on unrelated state changes");

return (
    cartItems ?
        <ul className="shop-cart-list">
            {
                Object.entries(cartItems).map(([id, item]) => (
                    <li className="shop-cart-list__item-wrapper" key={id}>
                        <ShopCartListItem item={item}/>
                    </li>
                ))
            }
        </ul>
        :
        null
);

}

`

where _selectShopCartItems_ is:

`const selectShopCart = state => state.shopCart;

export const selectShopCartItems = createSelector(
[selectShopCart],
shopCart => shopCart.cartItems
);`

_ShopCartList_ component will still rerender on every unrelated state changes.

[markerikson]

Please create a CodeSandbox project that demonstrates the issue.

[moazkh60]

I am also adding items in a cart using useSelector and facing the same issue. @maxim1006 have you solved this issue yet? I don't think we need to use reselect library useMemo or useCallback might get the work done.

[mmiller42]

I just found that the official react-redux useSelector docs have really good, thoroughly explained examples of usage with reselect: https://react-redux.js.org/next/api/hooks#useselector-examples