0

Code example;

<TextField id="name" onChange={(e: any) => setName(e.target.value)} value={name}> </TextField>

In this case; Is TextField rerendering when I press any character? Or Just value is changing?

If Element itself will be re-render, Is it the best way to do this?

Note: I set name to value because I have a form and if I come back to the screen I want to set state value to the TextField value.

Jonnel VeXuZ Dorotan
  • 418
  • 5
  • 15
mocco
  • 155
  • 4
  • 14
  • Does this answer your question? [avoid constant re-render from "input" or "textarea" in react js](https://stackoverflow.com/questions/46942476/avoid-constant-re-render-from-input-or-textarea-in-react-js) – Jonnel VeXuZ Dorotan Sep 04 '20 at 16:55
  • From which library the TextField is coming from ? – tsamaya Sep 04 '20 at 16:57
  • I looked the solution which you send, but my element is controlled element I think, it is Material-UI element. Should I create a new component for TextField and then should I use this statefull component? @JonnelVeXuZDorotan – mocco Sep 04 '20 at 17:20
  • Material-UI @tsamaya – mocco Sep 04 '20 at 17:20

1 Answers1

1

You probably need to separate stateful components into smaller components to avoid re-rendering if the props for that component haven't changed.

If all the individual <TextField> elements are in one large parent component, React will need to compare the requested UI structure of the entire form every time.

Also, use the React DevTools -> Profiler to see what parts are slow.

And, React DevTools -> Components -> Settings -> Highlight updates when components render.

Jonnel VeXuZ Dorotan
  • 418
  • 5
  • 15
  • I will try to create a statefull component for this TextField then I will see what is happening. Thanks – mocco Sep 04 '20 at 17:24