Using hooks with array of objects, best practice performance wise

Question

I am trying to use React Hooks context to update a view which is bound to properties in an array of objects. Do I need to create a separate state handler for each property or clone the array to trigger the rendering. What would be a best practice performance wise?

As a basic example of what I am trying to achieve: I have the following objectA

objectA {
   msg: string,
   subObjects: objectA[]
}

The App:

App -> Textfield (bound to objectA:msg)
App -> SubComponent -> TextField (x many and each one bound to subObject.msg) 
App -> ViewComponent -> Show objectA with subObjects (update whenever input changes)

Whenever a textfield is updated (the main textfield or any of the subcomponent textfields) objectA should be updated correspondingly and the ViewComponent should display the changes.

Performance depends on a number of factors, and some pseudo code is unlikely to illustrate those well enough to tell what those are. Generally, you should measure the performance you are getting now, use a different technique, and measure again. If it gets worse, then that tells you something. — Heretic Monkey
– Heretic Monkey, Commented May 22, 2020 at 0:46

Pedro Filipe · Accepted Answer · 2020-05-22 00:41:00Z

1

I've done a similar thing when building a tree with drag and drop features. The way I built it was by having a top-level state that would represent the way the tree would be rendered, and then, recursively render its branches.

In my opinion, you should do the same, and then, if that's what you want in your code, recursively render your components. Where the base case would be when a objectA doesn't have any more subObjects.

You can check the code here.

answered May 22, 2020 at 0:41

Pedro Filipe

1,1051 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using hooks with array of objects, best practice performance wise

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related