Day 126 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 126 of my software engineering marathon! Today, I locked down one of the most critical foundational concepts in frontend design: managing component lifecycles and isolating async side-effects using the useEffect Hook! ⚛️⏱️

Yesterday, my fetch operations relied on manual button clicks to bypass infinite re-render loops. Today, I automated the entire network pipeline—ensuring data syncs immediately when the page mounts without overloading the browser!

---

🛠️ Deconstructing the Day 126 Lifecycle Architecture

As showcased live inside my updated provider store code in "Screenshot (283).png", the side-effect layer is isolated cleanly:

1. Declaring the Component Side-Effect Block

• Instead of running asynchronous network queries exposed inside the functional block, I encapsulated the execution inside a strict hook layer on Line 21:

javascript
  useEffect(() => {
      fetch("[https://dummyjson.com/posts](https://dummyjson.com/posts)")
          .then((res) => res.json())
          .then((data) => {
              addInitialPosts(data.posts);
          });
  }, []);