I have a very big form - let's call it
<MyForm> - consisting of the following:
- text fields and dropdowns
- custom selector made of selectable cards
- table input (for this example 50 rows with each row having inputable text field)
- cancel button and submit button which will submit all the data inputted above to the API
Following React recommended practice of lifting state up, I would have states for all of them in the big
<MyForm> because to enable submission, I should put the states where the submission button is. That means I need to pass the states from
<MyForm> to the children components as needed, and having a callback that would update the states in
But by doing so, even if I split the states into multiple
useReducer, because on any state change the parent component would re-render (and hence all child components would be re-rendered), changing any input above would cause re-rendering of the entire
<MyForm>. This is especially taxing for the table input, and there is a visible "lag" on UI update after typing the input.
Are there any ways to get around this parent re-rendering, or to improve the performance? The only option I am currently aware of with vanilla React is to do conditional update, but doing that for every components doesn't sound efficient. Also I am aware of the suggestion to "just use redux" but I am looking for how to solve this in the long run from vanilla React perspective because I foresee eventually there will be a big component re-rendering even with redux.