The `useLoaderData` hook

Frontend and backend code

In any given website, there are two main parts to the code that drives it:

1. Frontend code: This is the code that runs in the user’s browser (the ‘client’). It’s written in JavaScript and is responsible for rendering the website and handling user interactions.

2. Backend code: This is the code that runs on the server. It’s written in a server-side language like Node.js, Python, or Ruby, and is responsible for fetching data from a database, processing it, and sending it to the frontend.

In a traditional website, the frontend and backend code are separate and communicate with each other using HTTP requests. The frontend code makes a request to the backend code, which processes the request and sends back a response.

In Remix, the frontend and backend code are combined into a single file called a route module. The file we have been working in - root.tsx - is an example of a route module.

This file contains both the frontend code (React components) and the backend code needed to render a particular page.

So far, we have been working exclusively on the frontend code. So where is the backend code? Let’s take a look…

The loader and action functions

Take another look at the app/root.tsx file:

app/root.tsx

import { useLoaderData } from 'react-router'
import { type Route } from './+types/root.ts'
import { type loader } from './__root.server.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import Document from './components/shared-layout/Document.tsx'
import { useNonce } from './utils/nonce-provider.ts'
import rootLinkElements from './utils/providers/rootLinkElements.ts'

export const links: Route.LinksFunction = () => {
  return rootLinkElements
}
export { meta } from './__root.client.tsx'
export { headers, loader } from './__root.server.tsx'

export default function App() {
  const data = useLoaderData<typeof loader | null>()
  const nonce = useNonce()

  return (
    <Document nonce={nonce} honeyProps={data?.honeyProps}>
      <div className="flex h-screen flex-col justify-between">
        <div className="flex-1">
          <main className="grid h-full place-items-center">
            <h1 className="text-mega">Welcome to Epic News!</h1>
          </main>
        </div>
      </div>
    </Document>
  )
}

export const ErrorBoundary = GeneralErrorBoundary

You’ll notice that we are exporting a function from this file called: loader.

export { headers, loader } from './__root.server.tsx'

This function is responsible for fetching data from the server and processing it before it is sent to the frontend.

But where is this function defined? The line highlighted above says that the loader function is being exported somehow, but we don’t see them in this file. 🧐

That’s because it is defined in a completely separate file: __root.server.tsx.

Deep Dive

import and export statements

JavaScript allows us to split our code into multiple files and then import and export functions and variables between them.

This helps to keep our code organized and makes it much better to work with.

Having smaller, more focused files makes it easier for humans to understand what is going on in each part of the code.

That’s precisely what the import statements are doing at the top of each file in the project, e.g.:

app/root.tsx

import { useLoaderData } from 'react-router'
import { type Route } from './+types/root.ts'
import { type loader } from './__root.server.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import Document from './components/shared-layout/Document.tsx'
import { useNonce } from './utils/nonce-provider.ts'
import rootLinkElements from './utils/providers/rootLinkElements.ts'

Each import statement is bringing in a function or variable from another file, so that it can be used in the current file.

If you are interested, open up the __root.server.tsx file and take a look at the loader function. You’ll see that it is responsible for fetching data from the server and sending it to the frontend.

We will be looking more closely at the loader function in a later tutorial.

For now, we just need to get the data from the loader function into the frontend component. Let’s see how we can do that…

Adding useLoaderData to the App component

useLoaderData is a custom React hook supplied for us by Remix.

Note

What is a hook?

In React, a hook is a function that lets you use state and other React features inside a function component.

In this case, useLoaderData is a custom hook that Remix provides to us.

It allows us to access the data returned from the loader function running on the backend, and pass it into the frontend component.

At this stage, we don’t need to worry about how it works, we just need to know that it returns the data from a loader function executed on the server.

Updating the import statements

Making sure you are still inside app/root.tsx, let’s start by updating the import statements at the top of the file.

Red and yellow lines

Errors and warnings in VS Code

When you paste the code below into your file, you may see some lines underlined in red and yellow:

This is because:

1. We haven’t used the values, variables and functions that we are importing yet, and VS Code is warning us about this.
2. VS Code expects the imports to be organised in a certain order, and we have added new imports that don’t follow this order (yet).

You can see both of these warnings if you hover over the underlined code in VS Code.

Don’t worry about these for now. We will be using these imports in the next steps, and we will organise them properly later on in the tutorial.

Add the code highlighted in green to the end of your import statements in app/root.tsx:

app/root.tsx

import { type LinksFunction } from '@remix-run/node'
import Document from '~/components/shared-layout/Document'
import { useNonce } from '~/utils/nonce-provider.ts'
import rootLinkElements from '~/utils/providers/rootLinkElements'
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'

Next, carefully add the code highlighted in green below to the App component function itself:

Take care

🧐 Place code with care

Look carefully where the highlighted code is added in relation to the code that is already there.

As you get more confident with JavaScript and Remix, you will learn where to place code like this more instinctively.

However, while you are finding your feet, take the time to slot these lines into exactly the same places in your own code.

app/root.tsx

import { useLoaderData } from 'react-router'
import { type Route } from './+types/root.ts'
import { type loader } from './__root.server.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import Document from './components/shared-layout/Document.tsx'
import { useNonce } from './utils/nonce-provider.ts'
import rootLinkElements from './utils/providers/rootLinkElements.ts'
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'

export const links: LinksFunction = () => {
  return rootLinkElements
}
export { meta } from './__root.client.tsx'
export { headers, loader } from './__root.server.tsx'

export default function App() {
  const data = useLoaderData<typeof loader | null>();
  const nonce = useNonce();
  const theme = useTheme()

  return (
    <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
      <div className="flex h-screen flex-col justify-between">
        <div className="flex-1">
          <main className="grid h-full place-items-center">
            <h1 className="text-mega">Welcome to Epic News!</h1>
          </main>
        </div>

        <div className="container flex justify-between pb-5">
          <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
        </div>
      </div>
    </Document>
  )
}

Deep Dive

Review your code

Take a few minutes to review the code you have added.

Can you can understand what it’s doing?

Remember you can CTRL + click (or CMD + click on a Mac) on component names to open code you’ve imported from elsewhere.

When you are ready, open the explanation below.

1. useLoaderData and the data object

app/root.tsx

const data = useLoaderData<typeof loader | null>()

The useLoaderData hook provides whatever value is returned from the loader function (which in this case we are importing from app/__root.server.tsx).

Think of useLoaderData as a bridge connecting the server to the browser.

Any code returned from loader that is generated on the server is captured and passed straight into the browser by this simple hook.

So, the data variable here represents the object being returned from the loader function that we have imported from the app/__root.client.tsx file.

A few lines down, we pass this into the ThemeSwitch component:

app/root.tsx

<ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />

As you can probably guess, this particular bit of the data object contains the user’s theme preferences (i.e. ‘light’ or ‘dark’), and is read directly from a browser cookie.

2. The ThemeSwitch component

The ThemeSwitch component is simply an icon wrapped inside a Remix form.

Explanation 🤓

Testing the light and dark mode toggle button

Save your changes, then head back to the browser. You should now be able to toggle the theme between light and dark mode by clicking the button:

🎉 Congratulations! 🎉

You now have a working light and dark mode toggle button in your Remix app! 🚀

Automatically organise imports in VS Code

Finally, lets fix the yellow underlines that might still be showing under your new import statements.

As mentioned earlier, VS Code is warning us that we haven’t used the values, variables and functions that we are importing yet.

Thankfully, VS Code provides us with a keyboard shortcut to automatically organise our imports in the correct order.

1. Windows: SHIFT + ALT + O
2. Mac: SHIFT + OPTION + O

Press this shortcut now to automatically organise your imports at the top of your file:

Remember to save your file after you have done this, and commit your changes to Git.

Assignment

📄 Assignment documentation

You have now completed the implementation of the light and dark mode toggle button in your Remix app.

It’s time to start the report you will be submitting that documents the process of building the app.

If you haven’t already, create a new Word document in your OneDrive folder and give it a suitable name, e.g. Building a news app with Remix.

Remember to include the following parts from this tutorial in your report:

Setting up light and dark mode

1. What is ‘light’ and ‘dark’ mode in a web app?
2. Why is light and dark mode important in a web app?
3. What accessibility considerations should be taken into account when implementing light and dark mode?

Adding useLoaderData

4. What is the useLoaderData hook responsible for in a Remix app?
5. Show how you have used the useLoaderData hook in your app to update the theme preference in the ThemeSwitch component.
6. Describe what React props are and how they are used to pass data into a component.
7. How are React props used in the Document component to control the theme of the Epic News website? Include:
   • The role of TypeScript interfaces in defining the shape of an object, and how this is used in the DocumentProps interface in the Document component.
   • How string interpolation is used to insert the value of a variable into a string in JavaScript, and how this is utilized in the Document component to control the theme of the Epic News website.
8. How did you test the light and dark mode toggle button in the browser?

Useful links

Useful links

• Why is light and dark mode important in a web app?
• What accessibility considerations should be taken into account when implementing light and dark mode?
• Remix useLoaderData hook
• React Props
• Typescript Interfaces
• JavaScript Template strings

Support your explanations with screenshots and code snippets where necessary.

What’s next?

In the next step, we will add a navbar and footer to the website to introduce navigation and improve user experience.