Code 301 Continuing Reading Notes 01

Lifting State Up

1. What does Lifting State Up mean? Lifting the shared state up to their closest common ancestor of the components that need it.
2. How does this work? If a component owns a shared state, it becomes the “source of truth” for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. If both props of both different components are coming from the same parent component, the two inputs will always be in sync.

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.

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.

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

Things I want to know more about

<—BACK