React Router Loaders vs useEffect?

Hi guys,

I started learning React Router V6 and got to the topic of Loaders. So, it sounds like Loaders are used to load data before a component is rendered and useEffect loads the component first and the data comes after. (Correct me if I’m wrong)

What are Pro and Cons of each?

What are examples of when a Loader would be better, a good option, or helpful to use instead of useEffect?

What are examples of when useEffect would be better, a good option, or helpful to use instead of a Loader?

Can they be used together? What are some examples?

What about CRUD operations? Would one option best suit an operation more than another? Any examples?

Would appreciate any info you can give me. Thanks!

I don’t have a firm answer, but want to give my thoughts. I’m definitely happy to be picked up and corrected on anything.

There have been some updates to the React documentation that you might not be aware of. They’re asking people to use the useEffect hook with more caution. Read more here useEffect • React

My understanding is that useEffect only updates the react dom when the data comes from an external source.

Note you should really only use the useEffect hook if you’re dealing with external sources.

When it comes to react routers loader package. They say

“Use when requiring the component for a Route , and the component will only be loaded when the route is rendered.” react-router-loader - npm

I think it is a form of lazy loading technique to render your components as and when a user clicks on a route.

My take on it is that components are local, so there is a separation of concerns. You can use useEffect for external calls and use loaders for local component rendering dependent on the users root.

Could be wrong, but entering into this in the spirit of discussion

1 Like

I did see that useEffect is great when using an API but the video below also uses Router Loaders to call an API.

Also, doesn’t useEffect update the dom when it senses a change in one of its dependenies?

I’m still very new to all things React so maybe there’s something I’m just having a tough time understanding.

Good on you for bringing it up to be fair. Although I fear it may be a case of the blind leading the blind!

The Net Ninja is great, also I realise I was refering to the WRONG documentation earlier!!! What a noob!

Looking at the correct documentation now :ok_hand:

It seems to provide you with a way to retrieve data, without useEffect, so yeah you’re right. Pretty awesome that this is baked in.

Deffo check out the new beta docs on useEffect though. they’re mint.

It’s good to read because it goes through some common usecases where you may think you need useEffect, but you don’t…

1 Like

Thanks for sharing the docs on why I might not need useEffect. After reading it I think im using it right. Below is an example

useEffect(() => {

        const fetchItem = async () => {
            try {
                let response = await axios.get('API');
                setItem(response.data);
            } catch (error) {
                console.log(error);
//If the post isn't found then  go to my catch all errors page
                navigate("*")
            }
        }

        fetchItem()

//This function isn't in useEffect since I have to call it somewhere else to
        fetchComments()

    }, [id, fetchComments, navigate]) 

I still have a lot to learn about React. I’m wondering if choosing loaders over useEffect is more of a matter of preference…

I think with Loaders you are able to use elementError in your routes but I may just be doing it wrong lol

useLoaderData() vs useEffect i recenlty saw it and i think i undestand the main differences and what are the pros of loaders.
-loaderdata reads the function that we declare as a loader it only reads and renders the results if the function returns ‘hi’ then it reads only hi.
-So… what can we see? We see that it does not trigger anything unlike useEffect, it only reads.

Example: we have a button in the component: Show more data.
What do we use for this case?? Answer: useEffect because it fetches data only when we click the button so its triggered.
Example: We type the url of a website vanslife/vans ==>>> so it shows a page of all the avaible vans.
What do we use here?? Answer: useLoaderData() because it reads all the data for our component when we navigate to that url and that is it.

Now some pros about loaders when we need the sec example, it reduces rerenders, usless and confusing useEffect code and useState, cleaner code etc.

Thanks for adding to the post! Really helpful. I was able to learn more about loaders through Scrimba’s React Router lesson and freecodecamp also has the Scrimba lesson on their YouTube channel. It does a good job going into depth about React Router and I plan to use what I learned to update the MERN project I was working on at the time I wrote the original post. :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.