Two Weeks of Chaos, Code, and Clarity : My MERN Journey Continues

The past two weeks have been a whirlwind. My college vacations ended, and I had to relocate back to campus. The sudden weather change hit me hard and I got sick, which meant I couldn’t code for several days. That was frustrating, especially since I had just started building momentum with React.But as soon as I felt better, I jumped right back in and React definitely had a few surprises in store for me.

Learning to Think in map() and filter()

One of the first hurdles I hit was understanding how to properly use map() and filter() inside React. While I had used them in plain JavaScript before, applying them in the context of rendering lists and components felt completely different.I kept running into issues like not returning values properly in map(), or filtering out the wrong data. It was only after trying out several examples and debugging with console.log that I started understanding how React expects these functions to behave in a rendering context.

Controlled Inputs and useState Confusion

Then came controlled components. It took me a while to grasp why we assign a useState variable to the value of an <input> field and handle changes with an onChange function.

Initially, it felt unnecessary and confusing. But once I understood that this approach keeps the UI in sync with the internal state, it started to make sense. Still, I had to break and fix multiple forms to get comfortable with this concept.

The React Router Maze

Next up was React Router. I had no idea how problematic full-page reloads were until I saw how they repeatedly triggered backend calls. To solve this, I installed react-router-dom and began using the <BrowserRouter>, <Routes>, and <Route> components.

Using useNavigate() for routing inside components was tricky at first, especially with all the new syntax and the requirement that it only be used inside a component. Importing pages also gave me trouble, especially with the difference between export default and named exports. I kept messing up my imports until I understood when to use curly braces and when not to. That alone fixed many errors.

Lazy Loading and Suspense

One of the most interesting things I discovered was lazy loading with React.lazy() and Suspense. This concept lets you load only the necessary components on demand, improving performance significantly.

It was fascinating to see how I could show a fallback UI using Suspense while a component was loading. That alone made my app feel smoother and more polished.

Prop Drilling and the Context API

As my project grew, I started running into the problem of prop drilling. Passing the same state through multiple nested components felt inefficient and made my code bulky.

To solve that, I explored the Context API. It allowed me to share data across deeply nested components without manually passing props through each level. However, this came with a new problem , components were re-rendering unnecessarily, even if they weren't directly modifying the shared state.

Recoil to the Rescue

That’s when I discovered Recoil. It introduced a new way to manage state through atoms, which are state units defined outside the component. This helped reduce unnecessary re-renders because only the components that actually use an atom will re-render when it changes.

Using hooks like useRecoilState, useRecoilValue, and useSetRecoilValue gave me more precise control over how and when my components update. I also started using selectors, which work similarly to useMemo by deriving data from atoms without modifying them. It was a powerful concept that made my state management much cleaner.

The Confusing Use of the Word "API"

One thing I’m still wrapping my head around is why everything in React and its ecosystem is referred to as an “API.” From Context API to Suspense API to Recoil , even though they perform vastly different tasks. I suppose it’s something I’ll get used to over time.

Final Thoughts

These past two weeks were anything but easy. Between being sick, getting stuck on countless bugs, and learning entirely new patterns, I definitely had moments of doubt. But I kept going.

Every error I fixed and every concept I finally understood made me feel just a little more confident in this journey. I’ve realized that persistence, practice, and not being afraid to ask for help are the real game changers in learning web development.

I’ll continue learning, building, and sharing my journey. If you’re going through a similar phase, just know that it’s normal to struggle, and every bit of progress counts.

Thanks for reading.