Things I Learned This Week :-

This week, I continued my journey into React and focused on making components more interactive, state-aware, and optimized for performance. Here's what I explored:

Handling Events in React – I learned how to handle user interactions like clicks, inputs, and form submissions using event handlers in React. I also understood the importance of event binding and how synthetic events work under the hood. Want a quick overview? Check out my keynotes.
React Router: Routing in React – I explored the basics of client-side routing using react-router-dom. I practiced creating multiple routes, working with <BrowserRouter>, <Route>, <Link>, and learned how to render components dynamically based on the URL path. Looking for code examples? Visit my keynotes.
useContext Hook in React – I understood how to manage global state using the useContext hook. This allowed me to pass data deeply through the component tree without prop drilling, making the codebase cleaner and more maintainable. Want to dive deeper? Check out my keynotes.
useMemo Hook in React – I explored how useMemo can help improve performance by memoizing the result of expensive computations. This ensures that the value is only recalculated when its dependencies change, which reduces unnecessary processing and re-renders. Curious to know more? Head over to my keynotes.
useCallback Hook in React – I learned how useCallback helps memoize functions and prevents unnecessary re-creations of callbacks, especially when passing them as props to child components. This technique ensures better performance and fewer re-renders in deeply nested structures. Want to see more theoritical part? Check out my keynotes.
Handling Forms in React – Finally, I worked on handling form inputs and submissions efficiently. I practiced using controlled components, managing form state, and validating user inputs with real-time feedback. For more details, check out my keynotes.

Steps That I Did :–

Practiced Event Handling in React – Implemented various user interactions like button clicks, input changes, and form submissions to understand how event handling works in React.
Explored React Router – Set up basic routing using react-router-dom, created multiple route paths, and used components like <Link>, <NavLink>, and <Outlet> for seamless navigation.
Integrated useContext for Global State – Created a context provider to share data across components and used the useContext hook to consume values without prop drilling.
Implemented useMemo – Identified computationally expensive functions and optimized them using useMemo to avoid unnecessary recalculations during re-renders.
Applied useCallback in Components – Used useCallback to memoize callback functions passed to child components, improving performance and preventing unwanted re-renders.
Built and Handled Forms – Created controlled components for form fields, managed input states using useState, and added validation logic to ensure data integrity before submission.

Challenges I Faced and How I Overcame Them :-

Differentiating useMemo and useCallback
Challenge: I struggled to distinguish when to use useMemo versus useCallback, and often misused them, leading to no performance gain.
How I Overcame It: I experimented with React DevTools and console logs to monitor re-renders. This helped me learn how memoization works in practice and when it's actually beneficial.
Handling Form State Efficiently
Challenge: Managing multiple input fields and maintaining validation logic while keeping the form responsive felt a bit overwhelming.
How I Overcame It: I structured form inputs as controlled components, grouped form data in a single state object, and implemented basic validation using conditional logic. Keeping the form modular improved readability and maintainability.

Resources I Used :-

Videos :- Sigma Web Development Course By CodeWithHarry
Documentation :- React

Conclusion :-

This week marked a significant step forward in my React journey. From mastering the fundamentals of event handling and routing to diving deep into advanced hooks like useContext, useMemo, and useCallback, I’ve started to see how React truly empowers developers to build scalable, maintainable applications. The process of building, breaking, debugging, and refining not only strengthened my technical skills but also taught me the importance of writing clean, optimized code.

Every challenge I faced became an opportunity to grow, and every concept I grasped added a new layer to my understanding of modern frontend development. As I continue this journey, I’m excited to explore more complex patterns and tools that React offers. The road ahead is full of learning, and I’m here for all of it — one component at a time.

"Web Dev Saga: Week 18 :– Mastering React: From Event Handling to Performance Optimization"