# Lifting State Up

## The state sharing problem

In some cases, it may be interesting to communicate or synchronize the state of a component with another component which is not a descendant of this first component (the set of components forms a graph). They can be for example at the same level of hierarchy in the component tree.

In React, the primary way to communicate data from one component to another is through the properties of those subcomponents. We thus speak of **Top-Down or Unidirectional Data Flow** .

As a reminder, it is not possible to modify its own properties. Moreover, the State is local to the component. We can obviously communicate the State in properties of its sub-components but once again it is a Top-Down approach.

### Solution: Lifting State Up

In order to solve this problem, the approach is to communicate the state of the components to their closest common ancestor. We then speak of **Lifting State Up** (raising the state).

It suffices for this that a component gives in properties to the descending component a callback function so that the latter can go up its state.

![](/files/wIoKrNjmbQst9nEZpnrw)

{% embed url="<https://reactjs.org/docs/lifting-state-up.html>" %}

## References and articles :

{% embed url="<https://kentcdodds.com/blog/application-state-management-with-react>" %}

{% embed url="<https://kentcdodds.com/blog/prop-drilling>" %}

{% embed url="<https://kentcdodds.com/blog/colocation>" %}

{% embed url="<https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster>" %}

{% embed url="<https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster>" %}

{% embed url="<https://dmitripavlutin.com/react-state-management>" %}

{% embed url="<https://hackernoon.com/reactjs-lifting-state-up-explained>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://maissen.gitbook.io/react-grimoire/react-guidelines/where-to-put-react-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.