reselect VS use-context-selector

Each one of those method calls represents a potentially huge tree of nested method calls. And if we've implemented memoization, it would all run in O(n), where n is the total number of methods. There is no performance impact from the nested calls and we're guaranteed to respect all business rules at every level (DRY), while keeping each method easily readable. reselect is a perfectly good library that provides composability and memoization.

But we needed this in Reselect because it has an incredibly variadic JS runtime API. You can pass in any number of input selectors, as either individual function arguments or one big array, and all the rest of the output behavior depends on those. This one giant MergeParameters type is effectively replacing 3300 lines of copy-pasta'd typedefs for 1...12 input selectors.

One thing that can help is the new customization options in Reselect 4.1.x. You don't need a deep equal check here. Instead, you could use a shallow check as the resultEqualityCheck option. It would still end up having to re-run the filter statement, because the input array is being changed to a new reference when you do an update to any item in the array. Filtering the array does create a new result array reference. But, resultEqualityCheck: shallowEqual will reuse the previous result as long as the contents of the array are the same, and that will prevent the component from re-rendering.

Over the years, as I've been using Redux, I've tried quite a few different forms of testing. Actions, reducers, sagas, selectors, some with more boiler plate results than others. One of the evolutions of testing that I've enjoyed the most has been with the library I use for selectors, reselect.

While Reselect has always been a separate library from Redux itself, it's in our Github org. The previous maintainer had to stop working on it, so a couple months ago we did some major updates to Reselect. Reselect 4.1.x has huge improvements to its TS types for better inference, and adds a new set of customization options like cache sizes > 1.

Fourth, Use Reselect / Re-reselect in Redux to Avoid Frequent Re-render. Reselect is a library for building memoized selectors that is commonly used for redux.

Another great tool used in the Redux world is Reselect. Storing the bare minimum data in the Redux store and then deriving data with memoization using Reselect. I had to create a poor man's version here. Feel free to check it out :)

We've completely revamped the Reselect types in the last few weeks and added new cache size options to its API - see https://github.com/reduxjs/reselect/releases

Reselect

Use of this implementation of useContextSelector

Another technology I use regularly is Redux. But this time I wanted to manage the global state in a simpler and clearer way just using React hooks. I decided to go with a simple useReducer combined with theuseContextSelector hook which will avoid the whole application’s re-render caused by the native useContext hook.

To be clear: this is not a made up problem. There is a React RFC on the topic since June 2019, there is an experimental PR to the React codebase for this since January 2021. There are external packages like use-context-selector to work around it. As of today, there is no efficient way of partially subscribing to context value changes that is a native part of React.

And then there's this library that will allow you to accomplish this: https://github.com/dai-shi/use-context-selector

In a previous article about React context performance, I mentionned the library use-context-selector that allows you to avoid useless re-render.

Use context selectors to fix some of the Context API performance issues: https://github.com/dai-shi/use-context-selector

This one https://github.com/dai-shi/use-context-selector it is well known Context with all benefits which Context gives, and with selector which is main benefit of state managers

The real mystery is why do not use this context with selectors. and no more holywars! Selectors are here, so it won't kill performance, it's still easier and less boilerplative than RTK, it's easy to write wrappers around it to use immer or to enhance in some other way.

can optimize performance and rerenders using https://www.npmjs.com/package/use-context-selector hook,