Performance issue with React controlled components

Question

I have been using react's controlled components in my application and .

But I am noticing that as I enter more and more inputs to these form components my page is slowing down badly or even hangs sometime.

Any clue ?

Emil Ingerslev · Accepted Answer · 2015-07-17 19:02:29Z

1

Sounds like you should look into the key="" attribute. Most often when react starts to slow down it is related to it doing more work than necessary. Another way to improve performance is implementing shouldComponentUpdate, but that should first be necessary later on.

answered Jul 17, 2015 at 19:02

Emil Ingerslev

4,8152 gold badges26 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jyoti Puri Over a year ago

Great answer. Thanks Emil.

darKnight Over a year ago

I am having the same issue, but I am not sure if I too should add the key attribute? I am not looping over some data to print a list or something using a .map. I have a list of <Grid/> components that are statically rendered.

Emil Ingerslev Over a year ago

@maverick only dynamically rendered items should have a key. If key is missing and needed, then it should, in the later version of React, be written as warnings in the developer console.

MarkSkayff Over a year ago

Well, I'm noticing the same performance issues, as every onChange event changes state, and thus the components is re-rendered. That has a big impact on performance.

Collectives™ on Stack Overflow

Performance issue with React controlled components

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related