-1

I have an application which on page load, fetches data(an array of objects) from database and displayed it as rows in UI. Each row is a child component which can be created, edited, deleted or reordered. The parent component has a Save button which gets the data from all child components and updates it in database.

There seems to be 2 ways to store this data:

Store all data in the parent component:

The parent component fetches the data, stores it in a state variable and passes it on to the child components. When data in child component changes, it is directly updated in the parent component. When we need to save, the whole state variable in parent can be written to database as it is.

Pros:

  • All data is maintained in parent as it should be in the database. So fetch and save are straightforward.
  • Child components are dumb and only display data in UI. Good separation of smart data-components and dumb presentational-components.

Cons:

  • Whenever a child updates data, parent's state var updates and so all child components re-render since they share the same state data var(am I wrong here? Does react handle arrays state var's element passed as props smartly?). This could be a problem if the list grows long and there are a lot of child components.
  • The parent component ends up doing almost everything, making it quite complex.

Store each row data in child component:

The parent component fetches the data, and passes it on to the child component. The child component maintains its own data and when data in child component changes, only updates it in its local state var. When we need to save, the parent component will have to ask each child component to provide its data, collate it into an array and update it in the database.

Pros:

  • On changing a row data, only that child component is re-rendered.
  • Child components handle their own data, making parent component simpler.

Cons:

  • Distributed data across child components means collating them for database writes are a pain.
  • On clicking save button, calling a function in child from parent using refs, which returns child data is not a recommended react pattern.

enter image description here

Antzy
  • 9
  • 2
  • 5

1 Answers1

0

In React is recommended that the parent component handles the data and distributes that data to children. To avoid re-rendering every child component I would take a look at memo(): https://reactjs.org/docs/react-api.html#reactmemo. This will cache your child component, and decides if it needs to be re-render or not.

To implement this with an Array I would check out this: How do I apply React.memo to all components in an array?

Kevin Z
  • 65
  • 8
  • 1
    Thanks. That's exactly what I wanted. I tested using React Profiler's re-render highlighter and it only re-renders the row I edit. Ran into a few roadblocks implementing React.memo but found this article which cleared it out all(especially useCallback): https://felixgerschau.com/react-performance-react-memo/ – Antzy Mar 11 '22 at 07:22