React Router Loaders vs useEffect?

JavaScript
1

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!

2

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
3

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.

4

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
5

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