Why You Need to Lift State Up in React: A Complete Guide with Animation

Why You Need to Lift State Up in React: A Complete Guide with Animation

Lifting state up is a common pattern in React that allows state to be shared between multiple components by moving it to their closest common ancestor. This technique helps maintain a single source of truth and improves data flow in your application.

Why Lift State Up?

- Ensures a single source of truth for shared state.
- Avoids prop drilling by managing state at a higher level.
- Improves component reusability and simplifies debugging.

Example Code with Animation

    
import React, { useState } from "react";
import { motion } from "framer-motion";

function Parent() {
  const [count, setCount] = useState(0);

  return (
    

      
Lifting State Up Example
       setCount(count + 1)} />
    
  );
}

function Child({ count, onIncrement }) {
  return (
    
      
Count: {count}
      
        Increment
      
    
  );
}
    
  

Challenge: Enhance the Animation

- Modify the animation to add a fade-in effect when the button is clicked.
- Experiment with different animations using Framer Motion.