ReactJS - setState cloned object or forceUpdate?

Question

In my state in React application, I have one object that is organized similar to tree structure. User can modify any node in that tree, from root to leaf. There are 3 levels in tree (depth = 3), and each level is rendered with specific function. When user update data, in order to re-render, I have two options:

• Clone this object to another new object, using strategy like DFS to traverse whole tree and find out the node needs modified, then setState this object.

• Directly mutate the node insides render function, then call forceUpdate from most-top components.

Are there any comparison between above methods or other ideal solutions?

Answer 1

Clone this object to another new object, using strategy like DFS to traverse whole tree and find out the node needs modified, then setState this object.

Seems like the best option for you. This way every time the state that you're modifying changes, your component would re-render without needing anything extra. Here and here you have articles in witch is explain why you never have to use forceUpdate.