CODEWITHSUNDEEP
javascriptreactjs
Anthony Martin
Anthony Martin

Reputation: 678

Managing a large state tree in React

I have some data in the rough form of:

Parent->child->grandchild->great grandchild

I have created a component for each level in the tree, with the top component storing the whole tree as state, and passing branches down via props etc to its children.

As the top component manages the state, it is responsible for CRUDing any of the children. If I simply want to add a new great-grandchild, I will have to replace the entire state tree on the parent component. Is this a vastly inefficient approach, or will React work out which components to re-render? Is there a better or more idiomatic way of achieving what I need?

Upvotes: 2

Views: 1675

Answers (1)

Christiaan
Christiaan

Reputation: 848

For this React supports "keyed children". This basically means adding a key={someUniqueId} attribute to all your child components.

"When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused)."

To answer your question

Is this a vastly inefficient approach?

Yes, if you do not use keyed children for every small change in one of the leafs the whole tree will be rebuild from the root up.

Upvotes: 3

Related Questions