How to optimize a React/redux application?

Question

JavaScript

Good afternoon! Please advise how to optimize the application on React / redux?
What to pay attention to when writing actions, reducers, maybe it slows down the work?!
Does the webpack config affect this?
The essence of the application ...
First, an array of objects is loaded by Ajax (there is no SSR yet), approximately 2000 objects.
When these objects start to be displayed (on the map and in the sidebar), it somehow starts to get a little stupid.
Especially the sidebar, the clustering map, more or less there.
In addition, there is also a socket server that sends data every three seconds, and when the data starts to merge, the page dies altogether.
The question is, to display only what is needed?
How to improve application performance?
I would be grateful for any advice.
Thank you!

Answer 1

Lots of objects in the DOM tree are evil. https://bvaughn.github.io/react-virtualized/ for help.
redux.
If there are computed selectors - wrap them in https://github.com/reactjs/reselect/
Make sure you have the correct store "shape". Consider in which structures it is better to store data so that it is easier to update / retrieve it.
If there is a bottleneck in the set of data transformations: think about such trifles, like creating new callback functions, resources are also spent on this - perhaps you need to apply something from functional programming (lodash-fp, ramda, most).
Don't overdo the magic. Try to write your application in such a way that the code is as close as possible to the current standard in the browser. To do this, we tune babel-preset-env, specifying the necessary targets.browsers, and look at caniuse/mdn which features from the standards you use and which are supported by current browsers.
I can't find a tweet from one of the React developers. TL;DR - React is not a silver bullet for a huge redraw problem.
Also, read: https://jakearchibald.com/2017/netflix-and-react/

Answer 2

1. Turn off all logs to the console - this is a synchronous, browser-blocking operation.
2. Check the code through ESLint, it gives a lot of tips on writing not only beautiful, but also correct code.
3. Use old implementations of some operations, such as Array.slice() instead of ...spread operator
4. Check presentational components to update only if they REALLY need to update the rendered data

Answer 3

There is even a separate article on this subject in the dock.