Week 18 – React Router Hooks, Context API & Understanding Large Codebases

This week felt less like “learning React” and more like “thinking like a React developer.”

Instead of just watching tutorials, I spent most of my time understanding how real applications are structured, how state flows through an app, and how routing and global state actually work together.

Concepts I Worked On

React Router Hooks

This week I focused on three very important React Router hooks:

• 
  useParams – Reading dynamic values from the URL


• 
  useSearchParams – Updating and syncing state with the URL query string


• 
  useNavigate – Navigating programmatically without using <Link />
  

These three hooks helped me understand that URLs are not just navigation tools — they can also store application state.

Routing Foundations

Along with hooks, I also revised and practiced:

• Nested Routes


• Index Routes


• SPA (Single Page Application) behavior


• Route structure and flow

I still feel there are a few advanced routing concepts left to fully master, but the base is now clear.

Project 1 – WorldWise

This is my main active project right now.

In WorldWise, I applied:

• Routing


• Nested Routes


• Index Routes


• useParams / useSearchParams / useNavigate

So far, the project is mainly focused on routing architecture and navigation flow.

The goal is to later integrate advanced state management and Context API into this project.

Project 2 – Atomic Blog (Codebase Understanding Project)

This project was different.

I did not build it from scratch.

I received a starter codebase from the course, and instead of just running it, I decided to:

• Read the entire structure


• Remove unnecessary parts


• Understand how data flows


• Learn how large React apps are organized

What I Learned Here

Context API

• Creating a global store using createContext
  


• Wrapping components with a Provider


• Accessing global state with useContext
  

Advanced Context Patterns

• Derived state


• Custom hooks (usePosts)


• Performance optimization tricks


• Structuring logic outside components

This project was more about patience and code reading skills than coding itself.

I didn’t publish or share its link because the goal wasn’t ownership — it was understanding architecture.

Key Realizations This Week

• Not every project is for showcasing — some are for deep understanding.


• Reading code is just as important as writing code.


• Context API becomes powerful when combined with custom hooks and derived state.
  


• Routing + Global State = Real Application Thinking.

Monthly Reflection

This month I worked on two projects:

1. 
   WorldWise – My main hands-on project where I actively implemented routing.


2. 
   Atomic Blog – A learning project focused on codebase understanding and Context API patterns.

One project improved my implementation skills,

the other improved my architectural thinking.

Closing Thought

Week 18 was not about speed.

It was about clarity, patience, and understanding how real React apps are built internally.

I’m now more confident dealing with:

• URL-based state


• Navigation control


• Global state with Context API


• Reading and modifying large codebases

Next step:

Applying advanced state management deeply into WorldWise and fully mastering routing patterns.