About 10 days ago, I decided to finally dive into React. I’d heard a lot about how powerful it is compared to plain HTML and JavaScript, and I wanted to see what the hype was about. What followed was a mix of small wins, confusing bugs, and moments where things just clicked and honestly, it’s been pretty fun.

Why React Felt Like a Life Saver

One of the first things that stood out to me was just how much React simplifies DOM manipulation. Coming from vanilla JavaScript, where even something as simple as changing a button’s label meant using getElementById and updating innerHTML, React felt like a breath of fresh air. It was clear early on that React’s approach to updating the UI made things much more efficient and cleaner.

I also learned that React is created by Facebook, and under the hood, it takes JSX which looks like HTML and turns it into plain JavaScript that browsers understand. That layer helps you focus on building, not fiddling with DOM APIs.

Getting Confused by Curly Braces and Components

One of my early headaches was dealing with curly braces in JSX. I wasn’t sure when to wrap variables with them, when to call functions with or without parentheses, or why CSS styling suddenly had double braces. It took trial and error, but eventually, I figured out:

Single braces are for embedding JavaScript inside JSX.
Double braces are used when you’re writing inline styles i.e. the first set signals you're writing JS, the second is the actual object.

Another thing that confused me at first was how components work. The idea of writing functions that return HTML like code was new to me. But once I saw how components re render automatically when state changes, it started to make sense. I also realized that breaking the UI into smaller, reusable pieces was a smart way to build scalable apps.

Understanding State Was a Turning Point

Figuring out useState was a big moment. At first, the syntax looked weird because it uses array destructuring to define a variable and its update function together. But once I got used to it, managing dynamic values like counters, text inputs, or lists felt way more straightforward.

Another key insight was understanding how state updates trigger re renders. That explained why some code was running more than once as React was refreshing the component every time the state changed.

Hooks Were Hard at First, But They’re Genius

Hooks were probably the most challenging part for me so far. Here’s how I broke them down and what helped me understand them better:

useState helps manage local state within a component.
useEffect confused me initially, but I learned that:
- It runs every render if you don’t pass any dependencies.
- It runs only once if you pass an empty array.
- It runs only when specific state variables change if you list them in the array.

This helped me avoid unnecessary re renders and put side effects like data fetching or event listeners in the right place.

useMemo and React.memo helped me understand performance optimization. I didn’t even know that functions and values could be recalculated unnecessarily until I noticed some weird repeated renders. Memoization made more sense after I saw how useMemo returns cached values and React.memo prevents components from re rendering unless their props actually change.
useCallback was another eye opener. I realized that even if the state doesn’t change, passing a new function reference could trigger a re render. useCallback fixed that by preserving the same function reference unless its dependencies change.
useRef came in handy when I needed to directly access a DOM element, kind of like using an ID in plain HTML. It was useful for reading or updating a value without causing a re render.

Breaking Through With Lists and Props

At one point, I was stuck trying to render a list of items. That’s when I learned about map ,a function I honestly should have looked into sooner. Pairing it with unique keys and props made everything fall into place. I saw how I could pass data and even functions to components and reuse them with different styles or behaviors.

Props also helped me understand how data flows in React from parent to child. Once I started thinking of components like custom HTML tags that accept arguments, I stopped getting confused by all the function calls and weird looking syntax.

What I Learned From Breaking Things

I’ll be honest ,I broke a lot of stuff in these 10 days. I kept refreshing the page to see why something wasn’t rendering. Sometimes I forgot to add a key to list items, sometimes I messed up the dependency array in useEffect, and other times I updated state directly instead of using the updater function, which caused weird bugs.But every time I broke something, I Googled it, tried different things, and slowly pieced together what was happening. That’s how I realized React isn’t just about writing code. It’s about thinking differently ,in terms of components, data flow, and side effects.thus I also managed to create my first ever full stack application, a ToDo app to add, update or mark todos as done.

Final Thoughts

Looking back, I feel like I’ve already come a long way even though I’ve barely scratched the surface. React has changed the way I look at web development. It has its quirks and a bit of a learning curve, especially with hooks, but once things start to click, it becomes incredibly rewarding.

I’ll be continuing this journey and sharing more of what I learn, what I break, and what I fix in the coming weeks. That’s all from me for now.Any suggestions from your side would be appreciated.

Mern Stack Journey Month 2 Week 1:react Deep Dive