Lifting up state

Question 1

Lifting up state

Answer 1

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.

Question 2

Single source of truth

Answer 2

There should be a single “source of truth” for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.

Question 3

Lifting up state and debugging

Answer 3

Lifting state involves writing more “boilerplate” code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state “lives” in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input.

Question 4

Value can be derived from props or state

Answer 4

If something can be derived from either props or state, it probably shouldn’t be in the state.