DEV Community: Nagakumar Reddy

Mastering Client-Side Routing with React Router DOM 6.25.1

Nagakumar Reddy — Tue, 23 Jul 2024 18:18:19 +0000

Navigating a single-page application (SPA) can be challenging without a robust routing system. React Router DOM is a powerful library that facilitates seamless client-side routing in React applications. This blog post will walk you through the essential concepts and usage of React Router DOM 6.25.1 to create a dynamic and responsive web application.

Adding a Router

Setting Up the Root Component

First, let's create a Root component that will serve as the layout for our application, including a header, footer, and an outlet for rendering child components.

import React from "react";
import { Outlet } from "react-router-dom";

const Root = () => {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
};

export default Root;

Creating a Browser Router

To enable client-side routing, we need to create a Browser Router and configure our routes.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ReactDOM from "react-dom";
import Root from './Root';
import Dashboard from './Dashboard';
import About from './About';
import User from './User'
import BigSpinner from './BigSpinner';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { path: "dashboard", element: <Dashboard /> },
      { path: "about", element: <About /> },
      {path="user/:id" element={<User />},
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} fallbackElement={<BigSpinner />} />
);

Fallback Element

If you are not server-rendering your app, createBrowserRouter will initiate all matching route loaders when it mounts. During this time, you can provide a fallbackElement to indicate that the app is working.

<RouterProvider
  router={router}
  fallbackElement={<SpinnerOfDoom />}
/>

Alternative Route Creation Method

Alternatively, you can use createRoutesFromElements to define your routes.

import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import Root from './Root';
import Dashboard from './Dashboard';
import About from './About';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="about" element={<About />} />
      <Route path="user/:id" element={<User />}
    </Route>
  )
);

Navigation Components

Using `<Link>`

A <Link> component allows users to navigate to another page by clicking or tapping on it. It renders an accessible <a> element with a real href.

<nav>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/services">Services</Link></li>
    <li><Link to="/contact">Contact</Link></li>
    <li><Link to="/about">About Us</Link></li>
  </ul>
</nav>

Using `<NavLink>`

A <NavLink> is a special kind of <Link> that knows whether or not it is "active," "pending," or "transitioning."

<ul>
  <li>
    <NavLink className={({ isActive }) => (isActive ? "active" : "")} to="/">
      Home
    </NavLink>
  </li>
  <li>
    <NavLink className={({ isActive }) => (isActive ? "active" : "")} to="/services">
      Services
    </NavLink>
  </li>
  <li>
    <NavLink to="/contact">Contact</NavLink>
  </li>
  <li>
    <NavLink to="/about">About Us</NavLink>
  </li>
</ul>

Using `<Outlet>`

An <Outlet> renders the child route elements. It is used in parent route components to display nested routes.

Programmatic Navigation

Using `useNavigate`

The useNavigate hook provides a way to navigate programmatically.

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();
  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
}

Using `useParams`

The useParams hook returns an object of key/value pairs of the dynamic parameters from the current URL.

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h1>User Profile for User ID: {userId}</h1>
    </div>
  );
}

Nested Routes

React Router DOM supports nested routes, allowing you to define routes within other routes.

<Route path="project" element={<Projects />}>
  <Route index element={<h1>Feature Project</h1>} />
  <Route path="all" element={<h1>All Projects</h1>} />
  <Route path="feature" element={<h1>Feature Project</h1>} />
  <Route path="new" element={<h1>New Project</h1>} />
</Route>

In this example, the index route specifies the default content to render when /project is accessed.

Conclusion

React Router DOM 6.25.1 simplifies the process of client-side routing in React applications. With features like programmatic navigation, nested routes, and hooks like useNavigate and useParams, you can build dynamic and responsive web applications with ease. Whether you're developing a small app or a large-scale project, React Router DOM provides the tools you need to manage routing effectively.

Discovering the Power of SWR: Streamlining Data Fetching in React

Nagakumar Reddy — Tue, 23 Jul 2024 17:54:38 +0000

When I first started working on data-driven React applications, one of my primary concerns was managing data fetching efficiently. Ensuring data was up-to-date while minimizing network requests seemed like a daunting task. Enter SWR, a revolutionary data fetching library for React that has transformed how I handle data in my projects. Let's dive into what SWR is, how it works, and how it can simplify your data fetching needs.

What is the SWR Library?

SWR, short for Stale-While-Revalidate, is a data fetching library for React that leverages an HTTP cache invalidation strategy to keep your data fresh. The SWR strategy works as follows:

Stale: Return the data from the cache.
Revalidate: Send a fetch request to get the up-to-date data.
Update: Return the latest data after fetching.

This approach ensures that the data displayed to users is always up-to-date while minimizing redundant network requests.

Key Concepts of SWR

Caching

SWR automatically caches the fetched data, allowing your application to serve data quickly without making redundant network requests. The cache duration can be time-based or event-based (e.g., reconnecting to the Internet), ensuring optimal performance and up-to-date information.

Revalidation

When cached data becomes stale, SWR revalidates it by re-fetching it from the server. Revalidation is automatically triggered:

Every time the component mounts, even if data is in the cache.
When the window gains focus.
When the browser regains its network connection.

How to Use the `useSWR` Hook

The useSWR hook is the main hook provided by SWR for data fetching. Here's how to use it:

Parameters

key: A unique identifier for the request (e.g., a URL).
fetcher: An async function that accepts the key and returns the data. SWR passes the key to the fetcher function when loading the data.
options: An object of options for customizing the behavior of the hook (e.g., cache time).

Returned Object

data: The data returned from the fetcher function (initially undefined).
error: The error thrown by the fetcher function (initially undefined).
isLoading: A boolean indicating the loading status of the first request.
isValidating: A boolean indicating the validation status of each request.
mutate: A function to manually trigger a revalidation.

Example Usage

Here's a simple example of how to use the useSWR hook in a React component:

import useSWR from 'swr';

const fetcher = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function App() {
  const { data, error, isLoading, isValidating, mutate } = useSWR('/api/data', fetcher);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  );
}

export default App;

How I Used SWR in My Project

For my Front End Libraries Certification project on freeCodeCamp, I integrated SWR to manage data fetching seamlessly. Although the project was written in TypeScript, I'll provide examples in JavaScript for simplicity.

Project Example

Here's a basic example of using SWR with an API endpoint:

import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

function MyComponent() {
  const { data, error, isLoading } = useSWR('/api/my-data', fetcher);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;

  return (
    <div>
      <h1>My Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

Using `SWRConfig` for Global Configuration

The SWRConfig component in SWR is a context provider that allows you to set global configurations for all SWR hooks in your application. By using SWRConfig, you can define default behaviors and options for data fetching, caching, and revalidation, which will apply to all instances of useSWR unless overridden at the individual hook level.

How to Use `SWRConfig`

Step 1: Import `SWRConfig`

First, import the SWRConfig component from the swr library.

import { SWRConfig } from 'swr';

Step 2: Wrap Your Application with `SWRConfig`

Wrap your application (or a part of it) with the SWRConfig provider. You can place it at the root of your application to apply the configurations globally.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { SWRConfig } from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

ReactDOM.render(
  <SWRConfig
    value={{
      fetcher,
      dedupingInterval: 2000,
      shouldRetryOnError: false,
      revalidateOnFocus: true,
      revalidateOnReconnect: true,
    }}
  >
    <App />
  </SWRConfig>,
  document.getElementById('root')
);

Step 3: Access Global Configurations in `useSWR` Hooks

Now, all useSWR hooks within the SWRConfig context will use the global configurations provided.

import useSWR from 'swr';

function MyComponent() {
  const { data, error, isLoading } = useSWR('/api/my-data');

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;

  return (
    <div>
      <h1>My Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

Example Configuration Options

Here are some common configuration options you can pass to SWRConfig:

fetcher: The default fetcher function for all useSWR hooks.
dedupingInterval: The interval in milliseconds to deduplicate requests. Default is 2000ms.
shouldRetryOnError: Whether to automatically retry on errors. Default is true.
revalidateOnFocus: Whether to revalidate when the window gains focus. Default is true.
revalidateOnReconnect: Whether to revalidate when the browser regains network connection. Default is true.
refreshInterval: The interval in milliseconds for polling data. Default is 0 (no polling).

Advanced Usage: Nested `SWRConfig`

You can nest SWRConfig providers to apply different configurations to different parts of your application. For example:

import { SWRConfig } from 'swr';
import MyComponent from './MyComponent';
import AnotherComponent from './AnotherComponent';

const App = () => (
  <SWRConfig value={{ fetcher: (url) => fetch(url).then((res) => res.json()) }}>
    <MyComponent />
    <SWRConfig value={{ fetcher: (url) => axios.get(url).then((res) => res.data) }}>
      <AnotherComponent />
    </SWRConfig>
  </SWRConfig>
);

export default App;

In this example, MyComponent will use the default fetcher, while AnotherComponent will use an axios-based fetcher.

Conclusion

SWR simplifies data fetching in React by providing automatic caching, revalidation, and a straightforward API. It helps ensure your application always displays up-to-date data while reducing the complexity of managing data fetching manually.

Using SWRConfig helps you centralize and manage the configurations for all data fetching operations in your React application. This makes it easier to maintain consistent behaviors and reduces redundancy, especially when dealing with multiple data-fetching components.

Embracing SWR in my projects has significantly improved my workflow, allowing me to focus more on building features rather than managing data fetching intricacies. Whether you're working on a small project or a large-scale application, SWR can help streamline your data fetching and keep your app responsive and up-to-date.

Understanding CORS: A Crucial Security Feature for Your React Applications

Nagakumar Reddy — Tue, 23 Jul 2024 17:36:30 +0000

In web development, security is paramount, especially when dealing with sensitive user data. One critical security mechanism is Cross-Origin Resource Sharing (CORS). This feature, implemented by web browsers, restricts web pages from making requests to a different domain than the one that served the original page. Understanding and correctly implementing CORS is essential for any developer working with React applications. Let's dive into what CORS is, why it's important, and how you can configure it for your React projects.

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It's a security feature designed to protect users by preventing unauthorized cross-origin requests. When a web page makes a request to a different domain, the browser sends an HTTP request to that domain. If the requested domain has CORS enabled, it will include specific HTTP headers in its response to indicate whether the requesting domain is allowed to access the requested resource.

By enforcing these restrictions, CORS helps prevent malicious attacks such as cross-site request forgery (CSRF). This security mechanism ensures that only trusted domains can access certain resources, thereby protecting users' data.

Configuring CORS on the Server Side

CORS settings are configured on the server, not in the React app. If you control both the front end and the back end, you can configure CORS on the server to allow requests from your React app's domain. Here's how you can set up CORS using Node.js and the Express framework:

Install the CORS package:

   npm install cors

Configure CORS in your server code:

   import cors from 'cors';

   const app = express();

   const corsOptions = {
     origin: 'http://localhost:5173', // Replace with your React app's URL
     optionsSuccessStatus: 200,
   };

   app.use(cors(corsOptions));

   app.get('/api/user', (req, res) => {
     res.json({ message: 'Hello, CORS!' });
   });

   app.listen(9032, () => {
     console.log('Server running on port 9032');
   });

In this setup, the server allows requests from http://localhost:5173, which is the URL where your React app is running.

Proxying Requests in Development

During development, if your React app needs to communicate with a backend server running on a different domain, you can use a proxy setup to avoid CORS issues. Here’s how to do it using create-react-app and Vite.

Using create-react-app:

Open your package.json file in the root directory of your React app and add a proxy field:

   {
     "name": "my-react-app",
     "version": "0.1.0",
     "private": true,
     "proxy": "http://localhost:9032"
   }

Make API requests in your React components:

   import axios from 'axios';
   import React, { useEffect, useState } from 'react';

   const App = () => {
     const [users, setUsers] = useState([]);

     useEffect(() => {
       const fetchUsers = async () => {
         try {
           const response = await axios.get('/api/user');
           setUsers(response.data);
         } catch (error) {
           console.error(error);
         }
       };

       fetchUsers();
     }, []);

     return (
       <div>
         <h1>Users</h1>
         <ul>
           {users.map(user => (
             <li key={user.id}>{user.name}</li>
           ))}
         </ul>
       </div>
     );
   };

   export default App;

Using Vite:

Configure the proxy in vite.config.js:

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';

   export default defineConfig({
     server: {
       proxy: {
         '/api': 'http://localhost:9032',
       },
     },
     plugins: [react()],
   });

Make API requests in your React components similarly as shown above.

Handling CORS Errors

If you encounter CORS-related errors, they will typically manifest as errors in the browser's console (e.g., "Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy"). In such cases, you'll need to check and adjust CORS settings on the server.

Using Fetch or Axios

When making API requests from your React app, you can use methods like fetch or libraries like Axios. These methods handle HTTP requests and responses, but they don't directly deal with CORS configuration. Any CORS-related issues will be handled by the browser and server interactions.

Here’s an example using Axios:

import axios from 'axios';
import React, { useEffect, useState } from 'react';

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/user');
        setUsers(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchUsers();
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Conclusion

CORS is a critical security feature that protects users by preventing unauthorized cross-origin requests. Properly configuring CORS on the server side is crucial for allowing legitimate requests from your React app while maintaining security. By understanding and implementing CORS correctly, you can ensure that your web applications are secure and your users' data is protected.

Understanding and configuring CORS might seem complex at first, but it's a necessary step to ensure the security and functionality of your web applications. With the right configuration, you can avoid common pitfalls and make your development process smoother and more secure.

Improving React Application Performance Using Dynamic Imports

Nagakumar Reddy — Sun, 21 Jul 2024 18:58:38 +0000

In React applications, optimizing performance is crucial, especially when dealing with larger codebase or complex UIs. One effective technique to enhance performance is through Dynamic Imports. Let's delve into how Dynamic Imports can be implemented and their impact on your application's bundle size and load times.

Understanding Dynamic Imports

When you initially build a React application using tools like Create React App (CRA), all components and dependencies are bundled into a single JavaScript file (typically bundle.js). This approach ensures simplicity but can lead to larger bundle sizes, impacting initial load times.

Dynamic Imports offer a solution by allowing components or other resources to be loaded only when needed, rather than upfront during the initial page load. This method partitions your codebase into smaller bundles that load on demand, optimizing both load performance and memory usage.

Implementing Dynamic Imports in React

Here's a step-by-step guide on how to implement Dynamic Imports in a React application:

Project Structure Setup:

Assume we have a Pages folder with components like Home, Profile, and Settings. These are traditionally imported into a routing setup, resulting in a single large bundle.

Dynamic Component Loading:

Implement a mechanism to load components dynamically within functional components using useState and useEffect hooks:

1. `HomeComponent.js`

import React from "react";

export default function HomeComponent() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

This file defines a simple functional component HomeComponent that renders a <h1> heading with the text "Home".

2. `Home.js`

import React, { useState, useEffect } from "react";

export default function Home() {
  const [Component, setComponent] = useState(null);

  useEffect(() => {
    const loadComponent = async () => {
      const loader = await import("./HomeComponent");
      setComponent(loader.default);
    };
    loadComponent();
  }, []);

  return <div>{Component ? <Component /> : <></>}</div>;
}

This file defines a functional component Home.
It uses useState to manage state (Component) and setComponent to load the component dynamically.
useEffect is used to ensure loadComponent is called only once on initial render.
Inside loadComponent, import("./HomeComponent") dynamically imports the HomeComponent.
When the component is loaded (Component is not null), it renders <Component />, otherwise an empty fragment <></>.

3. `App.js`

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Settings from "./pages/Settings";
import Profile from "./pages/Profile";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

4. `Routes.js`

This file should be updated as follows:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Settings from "./pages/Settings";
import Profile from "./pages/Profile";

export const router = (
  <Router>
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/settings" element={<Settings />} />
      <Route path="/profile" element={<Profile />} />
    </Routes>
  </Router>
);

so that is the way of importing things now in react (CRA)

In Vite, a modern build tool for web development, Dynamic Imports and code splitting are inherently supported without needing explicit configuration. Here's how it differs from Create React App (CRA), which uses webpack:

Automatic Code Splitting: Vite automatically splits your code into smaller bundles that load on demand. This optimizes initial load times and reduces the overall bundle size.

Native Dynamic Import Support: Unlike CRA where you might configure webpack for dynamic imports and code splitting, Vite comes with these features built-in. This means you can use dynamic imports straightforwardly without additional setup.

Vite utilizes Rollup as its underlying bundler, offering fast build times and instant hot module replacement (HMR) during development. This setup simplifies the development process, allowing developers to focus more on coding and less on build tool configurations.

Benefits of Dynamic Imports

Improved Initial Load Time: By loading only required components initially, the application starts faster.
Reduced Bundle Size: Smaller initial bundle size leads to quicker downloads, especially on slower networks.
Optimized Resource Usage: Components load only when needed, reducing memory footprint.

Considerations

Code Splitting Strategy: Plan and organize imports strategically to maximize the benefits of Dynamic Imports.
Tooling Support: Most modern React setups, including Create React App, support Dynamic Imports out of the box, simplifying implementation.

Conclusion

Dynamic Imports offer a practical approach to enhance React application performance by optimizing resource loading and reducing initial bundle size. By adopting this technique, developers can significantly improve user experience, particularly in larger applications or those with complex UIs.

This strategy not only aligns with best practices in modern web development but also ensures scalability and maintainability of React applications over time. By implementing Dynamic Imports, developers can achieve both better performance and enhanced user satisfaction.

Feel free to adapt and incorporate these techniques into your React projects to achieve optimal performance and scalability. Happy coding!

Creating Absolute Imports in a Vite React App: A Step-by-Step Guide

Nagakumar Reddy — Wed, 17 Jul 2024 08:47:40 +0000

Creating Absolute Imports in a Vite React App: A Step-by-Step Guide

Introduction
The Problem
Prerequisite
Setting up the Vite React Project for Absolute Imports
- Creating a Vite React App
- Configuring the Project for Absolute Imports
- Configuring VS Code IntelliSense
Practical Tips
Conclusion

Introduction

Relative imports can be cumbersome in large projects. Absolute imports simplify locating and referencing source files. This guide will show you how to set up absolute imports in a Vite-powered React app, configure your project, and set up VS Code IntelliSense.

The Problem

Relative imports can lead to confusing paths like import Home from "../../../components/Home";. Moving files requires updating all related import paths, which is time-consuming. Absolute imports fix this by providing a fixed path, like import Home from "@/components/Home";, making the code easier to manage.

Prerequisite

Node.js and Vite installed
Familiarity with ES6 import/export syntax
Basic knowledge of React

Setting up the Vite React Project for Absolute Imports

Creating a Vite React App

Run the command to create a new React app:

 npm create vite@latest absolute-imports -- --template react

Navigate to your project directory:

   cd absolute-imports

Install dependencies:

   npm install

Start the development server:

   npm run dev

Configuring the Project for Absolute Imports

Open vite.config.js and add the following configuration to resolve absolute imports:

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import path from "path";

   export default defineConfig({
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
     plugins: [react()],
   });

Configuring VS Code IntelliSense

Create or update jsconfig.json (or tsconfig.json for TypeScript) in the root of your project:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["src/*"]
       }
     }
   }

Open your VS Code settings (settings.json) and add the following line to ensure IntelliSense uses non-relative imports:

   "javascript.preferences.importModuleSpecifier": "non-relative"

Practical Tips

Consistently use absolute imports to maintain a clean and manageable codebase.
Regularly check and update your configurations to match project changes.

Conclusion

Absolute imports simplify your project structure and make your codebase more maintainable. By following this guide, you can easily set up absolute imports in your Vite React app and enhance your development experience.

DEV Community: Nagakumar Reddy

Mastering Client-Side Routing with React Router DOM 6.25.1

Adding a Router

Setting Up the Root Component

Creating a Browser Router

Fallback Element

Alternative Route Creation Method

Navigation Components

Using <Link>

Using <NavLink>

Using <Outlet>

Programmatic Navigation

Using useNavigate

Using useParams

Nested Routes

Conclusion

Discovering the Power of SWR: Streamlining Data Fetching in React

What is the SWR Library?

Key Concepts of SWR

Caching

Revalidation

How to Use the useSWR Hook

Parameters

Returned Object

Example Usage

How I Used SWR in My Project

Project Example

Using SWRConfig for Global Configuration

How to Use SWRConfig

Step 1: Import SWRConfig

Step 2: Wrap Your Application with SWRConfig

Step 3: Access Global Configurations in useSWR Hooks

Example Configuration Options

Advanced Usage: Nested SWRConfig

Conclusion

Understanding CORS: A Crucial Security Feature for Your React Applications

What is CORS?

Configuring CORS on the Server Side

Proxying Requests in Development

Handling CORS Errors

Using Fetch or Axios

Conclusion

Improving React Application Performance Using Dynamic Imports

Understanding Dynamic Imports

Implementing Dynamic Imports in React

1. HomeComponent.js

2. Home.js

3. App.js

4. Routes.js

Benefits of Dynamic Imports

Considerations

Conclusion

Creating Absolute Imports in a Vite React App: A Step-by-Step Guide

Table of Contents

Introduction

The Problem

Prerequisite

Setting up the Vite React Project for Absolute Imports

Creating a Vite React App

Configuring the Project for Absolute Imports

Configuring VS Code IntelliSense

Practical Tips

Conclusion

Using `<Link>`

Using `<NavLink>`

Using `<Outlet>`

Using `useNavigate`

Using `useParams`

How to Use the `useSWR` Hook

Using `SWRConfig` for Global Configuration

How to Use `SWRConfig`

Step 1: Import `SWRConfig`

Step 2: Wrap Your Application with `SWRConfig`

Step 3: Access Global Configurations in `useSWR` Hooks

Advanced Usage: Nested `SWRConfig`

1. `HomeComponent.js`

2. `Home.js`

3. `App.js`

4. `Routes.js`