React-redux: component with useSelector unnecessarily get rendered even if state return by useSelector is not updated

[amitgaikwad02bright]

Do you want to request a _feature_ or report a _bug_?
BUG
(If this is a _usage question_, please do not post it here—post it on Stack Overflow instead. If this is not a “feature” or a “bug”, or the phrase “How do I...?” applies, then it's probably a usage question.)

What is the current behavior?
component with useSelector get re-rendered even though state return by useSelector is not updated,
this was not case with using connect

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to a CodeSandbox (https://codesandbox.io/s/new) or RN Snack (https://snack.expo.io/) example below:

redux hook example - https://codesandbox.io/s/cocky-ardinghelli-epto4
https://epto4.codesandbox.io/

redux connect example - https://codesandbox.io/s/redux-react-connect-1-6pgfg

What is the expected behavior?

component with useSelector should not get re-rendered when state return by useSelector is not updated, behavior should be same like connect

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

[markerikson]

It looks like you're returning a new object from useSelector every time. Per the useSelector API docs, useSelector relies on _reference_ equality, not _shallow_ equality. You should either change your selector to return just the counter value ( (state) => state.counterState.counter), or pass shallowEqual as the second argument to useSelector.