No. useSelector just calls whatever your provided selector function is, and compares the current result reference vs the last result reference. If they're not === equal, it forces your component to re-render. Also, useSelector calls your selector function after every dispatched action to see if the data that this component needs has changed or not.
That means that if you have a selector that unconditionally returns a new reference, like state => state.todos.map(t => t.text), then it returns a new array reference for every action, and that causes the component to always re-render - even if it didn't need to!.
Memoization is implemented by you, when you create the selector function. This is normally done using the createSelector API from the Reselect library, which generates memoized selectors.
There's also a new library called github.com/dai-shi/proxy-memoize , which generates seletors that use ES6 Proxies to track what data is being accessed and whether those values have changed. It's not used widely yet, but it works better than Reselect in some cases, and I'm actively looking at it as an option that we can recommend to Redux users.
Wow great read.. never knew that there was difference between useSelector and mapStateToProps.
Just a quick question though, as per I understood from the article useSelector implements memoization to improve the performance, right?
No.
useSelectorjust calls whatever your provided selector function is, and compares the current result reference vs the last result reference. If they're not===equal, it forces your component to re-render. Also,useSelectorcalls your selector function after every dispatched action to see if the data that this component needs has changed or not.That means that if you have a selector that unconditionally returns a new reference, like
state => state.todos.map(t => t.text), then it returns a new array reference for every action, and that causes the component to always re-render - even if it didn't need to!.Memoization is implemented by you, when you create the selector function. This is normally done using the
createSelectorAPI from the Reselect library, which generates memoized selectors.See my post Using Reselect Selectors for Encapsulation and Performance for details.
There's also a new library called github.com/dai-shi/proxy-memoize , which generates seletors that use ES6 Proxies to track what data is being accessed and whether those values have changed. It's not used widely yet, but it works better than Reselect in some cases, and I'm actively looking at it as an option that we can recommend to Redux users.
Wow.. Thanks for the amazing explanation...🔥🔥