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 7 — Managing Complex State

📘 Day 7 — Managing Complex State

As applications grow, your components handle more complex state—arrays, objects, and nested data. React provides tools to manage and update these efficiently using the useState hook.

🔹 Updating Objects in State

When working with objects, always spread existing state to maintain immutability. 

function Profile() {
  const [user, setUser] = React.useState({ name: 'Rahul', age: 22 });

  const updateAge = () => {
    setUser(prev => ({ ...prev, age: prev.age + 1 }));
  };

  return (
    <div>
      <h2>{user.name} — {user.age}</h2>
      <button onClick={updateAge}>Increase Age</button>
    </div>
  );
}

🔸 Updating Arrays in State

function TodoList() {
  const [tasks, setTasks] = React.useState(['Learn React', 'Practice JSX']);

  const addTask = () => setTasks([...tasks, 'Master useState']);

  return (
    <div>
      <ul>
        {tasks.map((task, index) => <li key={index}>{task}</li>)}
      </ul>
      <button onClick={addTask}>Add Task</button>
    </div>
  );
}

🧠 Tip:

Always treat state as immutable. Never modify arrays or objects directly; use copies.

Comments

Post a Comment