How to use useLoaderdata hook in React router

React adopts a component-based architecture that allows developers to create reusable code sections. Hooks are the latest addition to React, which enables state management. They make our code concise, readable, and maintainable by adding state and other features to functional components. One of the hooks we will be going over is the useLoaderData hook. This hook greatly increases the user experience by loading any data from your routes even before they are rendered, preventing any empty states.

Benefits of the `useLoaderData` hook

Some of the benefits of the useLoaderData have been highlighted below. We’ll see more of these with tangible proof from a working React application.

Fetching data before it is rendered speeds up network requests, greatly increasing the web app’s performance.
Empty states are not displayed to the user if data is available to components in the pre-rendering stage.
Providing website data as quickly as possible provides a seamless user experience.
The code modularity is enhanced, and the developer has made a cleaner component design available by writing clear and concise code sections.

import React from 'react';
import {createBrowserRouter, createRoutesFromElements, Route, Link, Outlet, RouterProvider} from 'react-router-dom';
import './App.css';
import {HomeEducative} from "./HomeEducative"
import {DataEducative,load_my_api_data } from "./DataEducative"
import {ContactEducative} from "./ContactEducative"

function App(props) {
  const educative_router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<Root />}>
        <Route index element={<HomeEducative />} />
        <Route path="/contact_educative" element={<ContactEducative />} />
        <Route path="data_educative" element={<DataEducative />} loader={load_my_api_data} />
      </Route>
    )
  )
  return (
    <div className="App">
      <RouterProvider router={educative_router} /> {/* router is the prop */}
    </div>
  );
}
const Root = () => {
  return <>
     <div class="educatives_styles">
         <Link class="flex_item_one" to="/">Homepage</Link>
         <Link class="flex_item_one" to="/data_educative">Pet Gallery</Link>
     </div>
     <div>
        <Outlet />
     </div>
  </>
}
export default App;

Fetching data using useLoaderData

Code explanation

The following is a line-by-line explanation of the code above:

In the DataEducative.jsx file:

Line 1: We import the useLoaderData hook from the react-router-dom library.
Lines 2–12: We define DataEducative, a functional component that will preload data from the router using the useLoaderData hook and assign its value to educative_dog_object_url. We then display the image fetched from the public API using the img tag.
Lines 15–19: We define an asynchronous loader function called load_my_api_data. We call it a loader function because it hits the public API, https://random.dog/woof.json, using the fetch method and returns a JSON object. From that API endpoint, it returns the URL property.

In the App.jsx file:

Lines 1–6: In this section, we import some necessary modules and custom-made components—HomeEducative, DataEducative, and ContactEducative.
Lines 8–16: We define the app function component, which initializes the educative_router object using the createBrowserRouter router and createRoutesElements helper, which helps configure routes. The Root element is routed to the "/" path, ContactEduactive to "/contact_educative", index page to HomeEducative, and DataEducative to "data_educative" path respectively.
Lines 18–22: The entire educative_router is wrapped around the RouterProvider component by passing it as a prop.Arguments of React components are called props.
Lines 24–35: We define a Root functional component. This component will be rendered when the user accesses the Roots path. Two Link components have been used to navigate to the Homepage and Pet Gallery pages. We have also used the Outlet component to render each child component’s UI content.

Summary

To wrap things up, the useLoaderData hook in React significantly enhances the user experience by optimizing data loading before component rendering, thus eliminating empty states and providing faster access to website content. This hook not only improves performance but also promotes code modularity and cleaner component design, as demonstrated in the provided example. By abstracting data loading logic into a reusable hook, developers can achieve more concise, readable, and maintainable code, leading to a smoother development process and enhanced application quality.

Free Resources

How to use useLoaderdata hook in React router

Benefits of the useLoaderData hook

React application

Code explanation

Summary

Benefits of the `useLoaderData` hook