Thank you to our sponsors who keep my articles free:

If you’re building a SaaS, AI tool or any other web app, and you don’t have the all the time to set up boilerplate codes (e.g auth, DNS records, payment webhooks, components, animation, etc),
Then, you need ShipFast. Shipfast saves 18+ hrs of development headache , it’s trusted by 300+ devs and it has a very great documentation.

Today, I want to show you an alternative for the useState and useEffect hook in React. (It reduces a lot of boilerplate codes)

Many developers continue to use the useState and useEffect hooks to update states, but I have not been fond of this approach. The issue is that it causes the component to mount, remount, and unmount simultaneously, leading to unexpected behavior. As a result, when logging something into the console, you may see the result repeated three times.

Introducing the useLoaderData Hook:

The useLoaderData hook is a custom hook in React that helps you load data into your component. It simplifies the process of fetching data from an API or performing any asynchronous operation.

When you use the useLoaderData hook, you provide it with a function that returns a Promise. This Promise represents an asynchronous operation that will fetch the data you need. Once the Promise resolves, the data becomes available to your component.

The useLoaderData hook handles the loading state for you, so you don’t need to manually track whether the data is still loading or if it has finished loading. It provides you with a convenient way to access the data and also handles any potential errors that might occur during the data loading process.

By using the useLoaderData hook, you can keep your component code clean and organized, separating the data-loading logic from the rest of your component’s responsibilities. It allows you to easily fetch and manage data in a more beginner-friendly way.

Why the useLoaderHook?

The useLoaderHook from react-router helps achieve the same functionality with minimal effort. These are some examples of why you should use it.

• Loading state management: Loaders handle the loading state for you, providing a clear indication of when data is being fetched. This helps you manage loading spinners, progress indicators, or any other UI elements related to data loading.
• Error handling: Loaders often include error handling mechanisms, allowing you to handle and display errors that occur during the data loading process. They provide a standardized way to handle errors, making it easier to implement consistent error handling across your application.
• Separation of concerns: Loaders allow you to separate the data loading logic from other aspects of your component. This promotes better code organization and maintainability, as you can focus on specific responsibilities without mixing them.

And lots more.

Let’s see How This Works.

It’s assumed that you have a good knowledge of how react-router 6 works. If you don’t, Feel free to check out the docs here

Firstly, we have to set up the routing system in our application to work with the Loader API. Before now, we have been using the BrowserRouter setup to handle the various routes for our application.
Let’s spend a little time talking about this.