1

I've been trying to optimize an app by preventing the container component in the example below from re-rendering every time the child component updates. how to pre-rendering UsersList Component when input of EditableRow Component onchange? thanks. link code: https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx

Harman
  • 11
  • 2

1 Answers1

1

In the example you mentioned, component is re-rendering because the state is maintained in the parent component. So, when ever the state changes parent component re-renders and all the component depending on the state as props re-renders. If you move the 'handleEditFormChange' inside the EditableRow component and trigger the state change(setEditFormData) when the save button is clicked will prevent the re-rendering when the form data is changed.

lokprakash
  • 420
  • 3
  • 9
  • thanks for your reply, but when i click button edit of ReadOnly Component, it set value of edit user for editFormData, if i move handleEditFormChange inside the EditableRow component, editFormData state still change every time when input onchange. sorry my english not good :( – Harman Oct 22 '21 at 04:53
  • Yeah correct, the component will rerender when the edit button is clicked, our concern is to prevent rerendering when the input is changed. If we take a look in 'handleEditFormChange' function, state is updated with new value for each onChange trigger because of 'setEditFormData(newFormData)'. So you can actually trigger that state change when save button is clicked instead of onChange trigger. This can be acheived if the handleEditFormChange logic is moved into the EditableRow component or moving the setEditFormData into a seperate handler instead of onChange trigger. – lokprakash Oct 22 '21 at 05:37