Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more
Labels

📘 Day 12 — Lifting State Up and Shared State Patterns

📘 Day 12 — Lifting State Up and Shared State Patterns

When multiple components need to share data, React recommends lifting state up to their closest common ancestor.

🔹 Example: Sharing Input Between Components

import React, { useState } from "react";

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <div>
      <label>Enter temperature in {scale}: </label>
      <input
        value={temperature}
        onChange={(e) => onTemperatureChange(e.target.value)}
      />
    </div>
  );
}

function Calculator() {
  const [temp, setTemp] = useState("");

  return (
    <div>
      <TemperatureInput scale="Celsius" temperature={temp} onTemperatureChange={setTemp} />
      <TemperatureInput scale="Fahrenheit" temperature={temp} onTemperatureChange={setTemp} />
    </div>
  );
}

export default Calculator;

This approach keeps data consistent between components and avoids duplication. Lifting state up is the foundation of shared logic in React apps.

💡 When to Lift State?

  • When two or more components need the same data.
  • When actions in one component affect another.
  • When you want centralized logic for synchronization.

Comments

Post a Comment