# Lesson 4  - Lifting State Up - React Pattern Overview

<figure><img src="/files/6Nq74Us7arABqAgNRAI8" alt=""><figcaption></figcaption></figure>

### **Lifting State Up**

* **Concept:** Lifting state up refers to the practice of moving state from a child component to a shared parent component. This is done when multiple child components need to access and potentially modify the same piece of data.
* **Why Lift State Up?**
  * **Share State Between Components:** When multiple child components need to access and potentially modify the same data, lifting the state to their common parent allows for efficient data management and synchronization.
  * **Minimize Prop Drilling:** Prop drilling occurs when data is passed down through a chain of components, even if not all components in the chain need that data. Lifting state up to a common ancestor can significantly reduce the number of props that need to be passed down, making the component hierarchy cleaner and easier to maintain.
  * **Improve Data Consistency:** When state is managed in a single location, it ensures that all child components using that data have access to the most up-to-date version. This helps maintain data consistency across the application.
  * **Facilitate Component Reusability:** If multiple components need to share the same state, lifting the state up makes those components more reusable in other parts of the application.

### **Example: Random Quote Generator**

Let's consider a simplified example of a Random Quote Generator.

* #### <mark style="color:orange;">**Without Lifting State Up (Incorrect Approach)**</mark>

JavaScript

```jsx
// RandomQuote.jsx
function RandomQuote() {
  const [quote, setQuote] = useState(''); 
  // State is managed within the RandomQuote component

  // ... (rest of the component)
}
```

In this scenario, each `RandomQuote` component would have its own independent `quote` state. This would lead to inconsistencies if you wanted to display the same quote across multiple instances of the `RandomQuote` component.

* ### **With&#x20;**<mark style="color:orange;">**Lifting State Up (Correct Approach)**</mark>

JavaScript

```jsx
// App.jsx
function App() {
  const [quote, setQuote] = useState(''); 

  return (
    <div>
      <RandomQuote quote={quote} onGetQuote={() => setQuote(getRandomQuote())} /> 
      {/* Other components that might need the quote */}
    </div>
  );
}

// RandomQuote.jsx
function RandomQuote({ quote, onGetQuote }) {
  return (
    // ... (rest of the component)
  );
}
```

In this approach:

* The `quote` state is lifted up to the `App` component.
* The `App` component passes the `quote` and a `onGetQuote` function (which updates the `quote` state in the parent) as props to the `RandomQuote` component.
* Now, all instances of the `RandomQuote` component will display the same quote, ensuring consistency.

**Key Points Illustrated in the Image**

* The image visually represents the concept of lifting state up from a child component to the parent.
* It highlights the benefits of lifting state up, such as sharing state between components and minimizing prop drilling.


---

# 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://reactjs.koida.tech/react-state-and-styling/lesson-4-lifting-state-up-react-pattern-overview.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.