The `useLoaderData` hook

Frontend and backend code

In a typical website, code can be split into two main parts:

1. Frontend code

   • runs in the user’s browser (the ‘client’)
   • written in HTML, CSS and JavaScript
   • responsible for
     • rendering the website
     • handling user interactions
     • sending HTTP requests to the server

2. Backend code:

   • runs on the server.
   • written in JavaScript
   • responsible for
     • database fetching and updates
     • authentication and authorisation
     • providing HTTP responses to the client

The loader function

In Remix, front and backend code is combined into a single file called a route module.

The file we have been working in - root.tsx - is an example of this.

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

Modules: import and export statements

We can split our code into multiple files and then import and export functions and variables between them.

This helps to keep our code organized and easier to work with, and is precisely what we can see at the top of the 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'

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.

The useLoaderData hook

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.

Here, it is being used to pass the data from the loader function in __root.server.tsx into the App component running in the browser.

We will look more at this hook later in the module, but for now lets use another hook to get our theme switch working.

Adding the theme switch

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 will see the line is underlined in yellow:

This is because:

1. VS Code expects the imports to be organised in a certain order, and we are not following this (yet).
2. We haven’t used the values that we are importing yet, so VS Code is warning us.

Don’t worry about either of these for now - we will fix them soon.

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?

On your own, write a short explanation of what you think is happening. Then, with a partner, share your notes and be ready to feed back.

Tip

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. The useTheme hook

useTheme is a custom React hook (i.e. a function that can only be used inside a React component).

It’s a function that:

1. Figures out what theme the user wants (light mode or dark mode)
2. Returns that theme as a string (either 'light' or 'dark')
3. Stores the result in the theme variable

app/root.tsx

const theme = useTheme()

2. How is the theme Variable Used?

Data Type: The theme variable is a string.

Possible Values:

• 'light' - Light mode (light background, dark text)
• 'dark' - Dark mode (dark background, light text)

Example:

// If the user prefers dark mode:
const theme = useTheme()  // theme = 'dark'

// If the user prefers light mode:
const theme = useTheme()  // theme = 'light'

The theme variable is passed to the Document component:

<Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
  {/* ... rest of the app ... */}
</Document>

• We’re passing the theme value as a prop (property) to the Document component
• The Document component will use this value to apply the correct styling to the entire page

3. The ThemeSwitch Component

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

app/root.tsx

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

The ThemeSwitch component is a button that lets users change the theme of the website.

User Experience:

1. User sees an icon (sun, moon, or laptop)
2. User clicks the icon
3. The theme changes (light → dark → system → light → …)
4. The icon updates to show the current mode

The Three Modes:

• Light mode (☀️ sun icon): Everything is light-colored
• Dark mode (🌙 moon icon): Everything is dark-colored
• System mode (💻 laptop icon): Matches your computer/phone’s theme setting

The flow when user clicks

1. User clicks the button
   ↓
2. Form submits with nextMode value (e.g., 'dark')
   ↓
3. Request sent to /resources/theme-switch
   ↓
4. Server action runs (saves theme in cookie)
   ↓
5. useOptimisticThemeMode detects the change immediately
   ↓
6. useTheme returns the new theme
   ↓
7. Document component gets new theme
   ↓
8. Page updates with new colors!

Explanation 🤓

Compare your notes with the explanation above. Where there are differences, make a note of these.

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.