> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/react-state-and-styling/lesson-4-lifting-state-up-react-pattern-overview.md).

# 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.