React 渲染所有组件，同时使用 json 作为 state

Question

Hiho,

I'm using react for a bigger project, but I'm still a beginner there. Currently I have performance issues while entering information into a textfield on a big form page. I recognized that it is caused by the state set into the value property which is connected with all ui elements. I have a structure similar to:

<textfield value={myState.name} ...>...</textfield>
<textfield value={myState.someotherattr} ...>...</textfield>
...
<datePicker value={myState.date} ...>...</datePicker>
...

The state is synced by the database (automatically) and always contains the current information from the database. Always when I change a value in a textfield (by onChange and setMyState((oldState => {...oldState, name: newValue}))) all components related to that json will re-render. That leads to a huge input lag while typing.

I built a small example to reproduce this behavior. Here are 2 counters which will be increased by a button. I would assume, that only the increased React Component will re-render. But if I use the JSON variant both re-renders:

JSON variant:

https://github.com/Tockra/react-mini-example/blob/with-json/pages/index.tsx

Here the flamegraph which shows both components re-rendering:

Seperate state variant:

https://github.com/Tockra/react-mini-example/blob/with-seperate/pages/index.tsx

Here the flamegraph which shows both components re-rendering:

Is there any way to prevent the re-rendering without extracting all JSON properties to own react states with own setters? It would be very annoying for my real page with 10-12 input fields.

T

Answer 1

In general, in react when you have:

<Parent>
 <Child1/>
 <Child2/>
</Parent>

If you rerender the parent (say because you change state there), all children will re render.

If you want to prevent that look into React.memo , that will prevent children from rerendering if their props didn't change .

Also, it could be you have stored state of a child in parent, and hence when child updates state in parent all children rerender. But in some situations it maybe also possible to move that state from parent to child, in that case, if child changes state (which doesn't live in parent anymore), other children won't re render. But it depends, sometimes it maybe more desirable to have child state in parent.