App performance review

Working on the issue 501, I had to understand how the app is propagating the TX list in order to show a new filed origin.

I found that src/routes/index.js renders this: const Safe = React.lazy(() => import('./safe/container')) … <Route path={SAFE_ADDRESS} component={withTracker(Safe)} />

So far so good, then Safe, in componentDidMount using an interval: const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 5000 fetches an insane amount of that from the API and propagate it to the <Layout through props.

After that, Layout in the render, using react-router handles the content for each tab:

Here we have 2 huge problems:

1. No all tabs need all the data fetched in <Safe component.
2. Sending all the props at <Layout level, produces a re-render of the whole app each TIMEOUT interval.

My proposal We can solve this problem pretty simple.

1. Create a Redux store an entry in the redux store per each type of “data”, Tokens, Transactions, Currencies, AddressBook, etc.
2. <Safe, instead of passing all the fetched data to <Layout as props, it updates the store from point 1.
3. Then, each Tab subscribes to that store for the data it really needs, for example, Balance tab, will only subscribe to Tokens and not Transactions.

Refactor Needed The refactor should be really simple to implement, it’s just to move some props from Layout to the particular components and… subscribe these components to the redux store created at point 1.

Improvement

• With this solution, the whole app won’t render each 1.5 seconds in dev or 5 seconds in production. Only the needed components will render.

• Also, the development will be simplified because we won’t need to pay attention in side-effects produced by the constants re-renders.

• spiritual peace

GOAL: Create multiple issues focusing each of them on a specific performance issue.

[nicosampler]

I mean a key per entity in the current store

[Agupane]

I strongly agree with this proposal, Also I think it would be also useful some benchmarking as Mikhail suggested 😃 but I think that maybe we would need to get rid of immutable js in order to achieve that as already mentioned

Would be nice if we can do a small experiment with this to see what we can do and estimate it better