react

React Router 7 : some thoughts

Pandiyan MuruganLeave a comment

React Router 7 is transforming the way developers build web applications with React. Far more than a routing library, it has grown into a powerful framework for developing robust, data-driven apps featuring advanced navigation, server-side rendering (SSR), loaders, actions, and more. Whether you’re just starting or updating legacy projects, understanding React Router 7’s features will supercharge your development workflow.

Why React Router 7 is a Game Changer

React Router 7 introduces:

  • Nested Routing: Simplifies complex UIs with component-based layouts.
  • Data Loaders & Actions: Provides declarative ways to fetch data and manage forms.
  • Rendering Flexibility: Supports SPA, SSR, SSG, and hybrid workflows.
  • Pending & Optimistic UI Support: Handles async UI states seamlessly.
  • Modern Navigation APIs: Easier redirections and programmatic routing.

These features enable you to build sophisticated apps that scale from simple sites to full-stack, production-grade platforms.

Getting Started: Setting Up a React Router 7 Project

Start by initializing your project with the official template, ensuring all the latest dependencies and folder structures are in place:

npx create-react-router@latest my-react-router-app
cd my-react-router-app
npm install
npm run dev

This scaffolds a modern, best-practice project ready for advanced routing.

Core Concepts and Practical Examples

1. Basic Routing

Start by wrapping your app with <BrowserRouter>, the root provider for route management:

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Define your application’s routes with <Routes> and <Route> components:

import { Routes, Route } from "react-router-dom";
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

2. Nested Routing and Layouts

Structure complex interfaces by nesting routes and harnessing shared layouts via the <Outlet /> component. For example, a dashboard could have shared side navigation with nested child routes for different sections.

3. Data Loaders

React Router 7’s loaders let you fetch route-specific data before rendering components, enhancing user experience and enabling better SSR and SSG strategies. Instead of fetching data in components, use loaders at the route level for cleaner and more predictable data flows.

4. Form Actions

Forms are now first-class citizens. Attach actions directly to routes to handle server mutations or form submissions declaratively. This empowers optimistic updates and simplifies traditional state management.

5. Rendering Strategies

React Router 7 is built with server-side rendering and static site generation in mind. Choose your data fetching and rendering approach per route for maximum flexibility—mix-and-match SSR, SSG, and SPA pages in a single app.

6. Pending and Optimistic UI States

Built-in support enables you to seamlessly show loading indicators while data is being fetched (pending) or immediately update the UI in response to user actions (optimistic), dramatically improving user experience.

7. Programmatic Navigation

Leverage useNavigate hook or <Navigate /> component for imperative navigation or redirect scenarios, essential for flows like authentication or user onboarding.

Recommended Learning Path

  1. Project setup and routing basics
  2. Working with loaders (data fetching)
  3. Handling forms using actions
  4. Navigation and redirects
  5. Choosing appropriate rendering strategies
  6. Optimistic UI and loading indicators
  7. Testing routes, loaders, and actions

By progressing in this order, you’ll build a solid understanding and comfortably wield the full power of React Router 7.

Final Thoughts

React Router 7 positions itself as a cornerstone for modern React apps—powerful, declarative, and flexible. As the boundaries between frontend and backend blur, mastering its advanced routing, data-loading, and rendering techniques is essential for any React developer aiming to build future-proof, data-rich applications.

Jump in, experiment with loaders and actions, and let React Router 7 elevate your React projects.

Happy coding!

Understanding useContext and Implementing It in Next.js

Pandiyan MuruganLeave a comment

React provides a powerful feature called useContext that simplifies state sharing across components. In this blog, we’ll explore what useContext is and how to use it effectively in a Next.js application.

What is useContext?

useContext is a React hook that allows you to access the value of a Context directly in functional components. Context provides a way to share data—such as themes, user information, or global settings—across the component tree without manually passing props down at every level.

Benefits of useContext

  • Simplifies state management.
  • Eliminates the need for prop drilling.
  • Works seamlessly with React’s functional components.

How to Use useContext in Next.js

Here’s a step-by-step guide to implementing useContext in a Next.js project.

1. Create a Context

First, create a context with a default value.

import { createContext } from 'react';

// Create a Context
export const MyContext = createContext(null);

2. Create a Context Provider

A Context Provider is a wrapper component that provides the context value to its children.

import React, { useState } from 'react';
import { MyContext } from './MyContext';

export const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello, Context!');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

The MyProvider component wraps children components and provides the context value (state and setState) to all of them.

3. Wrap Your Application with the Provider

Next, wrap your Next.js application with the Context Provider. In Next.js, this is typically done in pages/_app.js.

import { MyProvider } from '../path/to/MyProvider';

function MyApp({ Component, pageProps }) {
  return (
    <MyProvider>
      <Component {...pageProps} />
    </MyProvider>
  );
}

export default MyApp;

This ensures the context is available throughout your application.

4. Access Context Using useContext

Finally, you can use the useContext hook to access the context value in any component.

import React, { useContext } from 'react';
import { MyContext } from '../path/to/MyContext';

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>Current State: {state}</p>
      <button onClick={() => setState('Updated Context Value')}>
        Update State
      </button>
    </div>
  );
};

export default MyComponent;

Here, state and setState are accessed directly from the context, eliminating the need for prop drilling.

Example Use Case: Theme Context in Next.js

Let’s implement a real-world example where useContext is used to toggle between light and dark themes in a Next.js application.

1. Create a ThemeContext.js File

import { createContext } from 'react';

export const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

2. Create a ThemeProvider.js File

import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

3. Wrap the App in pages/_app.js

import { ThemeProvider } from '../path/to/ThemeProvider';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

4. Use the Context in a Component

import React, { useContext } from 'react';
import { ThemeContext } from '../path/to/ThemeContext';

const HomePage = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default HomePage;

Here, the theme value determines the background and text color, and the toggleTheme function toggles between light and dark modes.

Conclusion

The useContext hook is a powerful tool for managing state and simplifying component communication in React applications. In Next.js, it integrates seamlessly to provide global state management without the need for external libraries. By following this guide, you can efficiently use useContext to enhance your Next.js projects.