O
O
Oleg Drapeza2017-06-16 13:20:20
React
Oleg Drapeza, 2017-06-16 13:20:20

React + Redux app performance bottlenecks?

Good afternoon!
I encountered lags while developing an application on React and Redux.
Case:
50 - 100 input fields, each with unique reducers in the store.
The input field is a single connected component that wraps the presentational component.
With continuous input of characters in the field, there is a noticeable input delay (for each character 2 actions).
For the test, I changed the connected component, now instead of binding to store, it stores and changes the value through state.
The speed has increased noticeably, but the jerks remain!
I debugged performance under different conditions, in devtools and React Perf, it all comes down to the fact that React does its job quickly.
On average, without connecting components to the store, the general picture is as follows (10x slowdown for clarity):
The event (keypress) takes more than 5 times the rendering of the component.
b60a4b5018e14b2ebe6a8ff2ab27a74c.JPG
The main question is - how is it that React renders quickly, but the application lags?
Interested in any suggestion that it may not be so.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Makarov, 2017-06-22
@rmakarov

1. You only need to test performance in a production build. (Google react production build)
2. The most common bottleneck in redux applications is shouldComponentUpdate and the irrational use of props. (Here read the docs about scu, reselect, and pureComponent)
3. Store should be as flat as possible, i.e. contain minimal nesting (follows from item 2)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question