question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

make work as general react-redux memoizer

See original GitHub issue

Hey Anton, so basically for one we need it to work in the demo:

https://codesandbox.io/s/64mzx7vjmz?module=%2Fsrc%2Fconnect%2Findex.js

You mentioned that function references was the primary issue. So we need that.

Here’s a primary test that must work:

static getDerivedStateFromProps(nextProps, prevState) {
        const { storeState, ...props } = nextProps
        const state = selector(storeState, props)

        console.log(prevState === state) // this must be true, when we are expecting it to be true :)

        return prevState === state ? null : state
}

Then dispatch({ type: 'BAR' }). The comparison will always be will always be false, even when nothing in state has changed. So hopefully this is just a matter of making the dispatch key/val work.


As far as this:

const fn = memoize(obj => ({ obj })
fn({ foo: 123 }) === fn({ foo: 123 })

Perhaps, we don’t in fact need that. So let’s just forget that for now.

Feel free to fork the demo, upgrade the deps, and paste a link to the working demo on the react-redux PR. I think it would be quite impressive to see all this come together in that demo. So for now, let’s just think about what’s actually being done in the demo, and then later I’m sure other cases will be brought to us.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:22 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
theKasheycommented, Mar 11, 2018

What do you mean by “way to inject ‘additional’ keys to track”? If you will found, that memoize should also react on some keys it didn’t before - ie set up tracking on the keys the usage of those it could not detect.

const selector = memoize((state,props) => () => props.dispatch(state.videos.length ? 1 : 2);
selector.setAdditionalTrackingOn(['.videos.length'],['dispatch']);
0reactions
theKasheycommented, Mar 12, 2018

@faceyspacey - lets continue with spread in separate issue - https://github.com/theKashey/memoize-state/issues/5

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make memoization work with useCallback() and ...
The standard approach here is to create a unique instance of a memoized selector in the component, and then use that with useSelector....
Read more >
React Redux Performance Techniques and Optimizations
Learn React Redux performance techniques and optimizations as we look at our blog project to see when components are re-rendering and why.
Read more >
Writing Logic with Thunks | Redux
Because thunks are a general-purpose tool that can contain arbitrary logic, they can be used for a wide variety of purposes. The most...
Read more >
Memoizing the state in React / Redux applications - Medium
In this article, we consider the library "Reselect", which helps to make the memoized selectors and subsequently get the immutable data from ...
Read more >
Reselect: the redux memoizer we need, but not ... - Peter Coles
An overview of how Reselect fits into a Redux + React application and how it can become indispensable for performance.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found