Material-ui: Input element typing is very slow

[satya-dash]

I have a huge application build in React+ES6+React-Router+Flux.As the application grows day by day its performance is getting degraded.Every input element is having a lag as you type something.So I don't know how to optimize it.My all elements are tightly bound to state variables.So on every change in text field it is updating the state variable and re-renders.I think that is the reason for which everything is getting slow.

But the concept of React says that it will update only the diff part but I think in my case it is violating.

So I just wanted to ask is it really for Material-UI or the way I structured my code.

A sample code is attached below.

Versions

• Material-UI: 0.15.4
• React:15.3.2
• Browser: Chrome 55.0.2883.95 (64-bit)

[oliviertassinari]

But the concept of React says that it will update only the diff part but I think in my case it is violating.

Your issue is at the virtual DOM computation. Each update is triggering a major virtual DOM recomputation.

/*Many more components are used here*/

Your best option here is to avoid rerendering at the root node. You gonna needs a state management library to connect updates lower in the tree.