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

Source: Dev.to

React Router Hooks

This week felt less like “learning React” and more like “thinking like a React developer.” I focused on three important React Router hooks:

• useParams – reading dynamic values from the URL
• useSearchParams – updating and syncing state with the URL query string
• useNavigate – navigating programmatically

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

Additional Routing Concepts

• Nested routes
• Index routes
• SPA (Single Page Application) behavior
• Route structure and flow

I still have a few advanced routing concepts to master, but the fundamentals are now clear.

Projects

WorldWise (Main Active Project)

In WorldWise I applied:

• Routing, nested routes, and index routes
• useParams, useSearchParams, and useNavigate

The project currently focuses on routing architecture and navigation flow, with plans to integrate advanced state management and the Context API.

Atomic Blog (Codebase Understanding Project)

For Atomic Blog I worked with a starter codebase from a course. Instead of building from scratch, I:

1. Read the entire structure
2. Removed unnecessary parts
3. Mapped data flow
4. Learned how large React apps are organized

Key implementations

• Created a global store using createContext
• Wrapped components with a Provider
• Accessed global state with useContext

Advanced Context Patterns

• Derived state
• Custom hooks (e.g., usePosts)
• Performance optimization tricks
• Structuring logic outside components

This project emphasized patience and code‑reading skills over writing new code, reinforcing that understanding architecture is as important as building it.

Context API Insights

The Context API becomes powerful when combined with custom hooks and derived state. Using it alongside routing enables real‑application thinking:

Routing + Global State = Real Application Thinking

Takeaways

• URL‑based state: Managing state through the URL is now second nature.
• Navigation control: Programmatic navigation is straightforward with useNavigate.
• Global state with Context API: Comfortable creating and consuming context providers.
• Reading and modifying large codebases: Improved ability to dissect and extend existing projects.

Next Steps

• Apply advanced state management deeply into WorldWise.
• Fully master routing patterns and advanced Context API techniques.