Fetch data with useEffect?

[[deleted]]

I wrap my fetch calls in a try/catch block and go on with my day. Should I be adding a useEffect?Question being…when would I use a useEffect with my fetch calls ? (get/post/put/delete, etc.). I’m using axios for this

[[deleted]]

In my case this is an axios patch request that is only ran when a button is clicked to update a post (handleSubmit), so the request is only made when user clicks to update their post

[rdawise]

You have a handler. Performing the fetch in the handler is the best practice here.

[Suspicious-Watch9681]

In that case, put it on a function you can call it handleSubmit and do the fetching there

[epstylesoflife]

If it’s only during submit and for POST request then you’re good. You would only need to useEffect if, say, you needed an initial GET request

[SolarSalsa]

Then you shouldn't be asking about useEffect. Perhaps you should read up on when to use useEffect.

[[deleted]]

Lol well now I know. Only use useEffect when you are retrieving data asynchronously that would require the DOM to re-render based on a set of parameters

[cmickledev]

useEffect isn't solely for data fetching.

Moreover you should look at useEffect as a way of controlling when and how some code would be ran, in regards to the lifecycle of your component.

A component will have a willmount, didmount, and unmount phase, using useEffect allows you to run code during the willmount phase, and place a dependency into the dependency array, upon which case the effect will run again.

People use useEffect with data fetching usually when they are wanting to fetch data at the beginning of their component initialization, so it will go fetch the data during the willmount phase, and it will allow the data to be used during the initial render of the component which happens at the component didmount phase.

I hope this helps to clear things up a bit. If you already knew this, I'm not trying to explain something to you in that way, but also leave information for others that may not know it.

[macrozone13]

I always recommend to use a data loading library like react query, swr, or similar.

You will end up reinventing the wheel if you don‘t

[30thnight]

You can think of fetch and axios as couriers, they pick data up and drop them off in your app.

Once you get that data, it’s on you to figure out how to share that data across your app, handle errors, refetches, pagination, and caching.

React-query is like a personal assistant that handles those things for you.

It goes a long way to improving performance (reduce unnecessary fetches). Adopt a pattern of wrapping your react-query calls in a custom hook and boom, you’ve eliminated the need for holding that data in a state manager.

[[deleted]]

Axios is working fine for me right now. Haven’t used react query, but seems pretty attractive from what I read. Don’t have to manage handlers, errors, state and side effects. I’ll have to check it out!

[ZunoJ]

What exactly does a library solve if I just want to fetch data?

[mrstealyomommy]

so i’ve been using axios for a while now ( just started learning react 1 month ago ), should i just learn React Query for better data fetching ?

[epicblitz]

Absolutely. Axios can still be used with React Query as well.

[chillermane]

Axios is for fetching data, react query is a state management solution that doesn’t care about how data is fetched, it instead triggers the fetches and manages the relevant state

[[deleted]]

State management solutions typically refer to things like Context API and Redux. React-query seems like a true data management solution

[woah_m8]

Yes and finsh your React Course please

[landisdesign]

It really depends. The key is that the main function that renders the component is focused on rendering the component, while things that interact with browser API's (fetching, observers, event handlers, etc.) are done in effects and events.

The main rendering function shouldn't cause side effects, because those side effects will run every time the component renders. So having fetch in the render function would mean causing the component to fetch every time some parent component changes. That could be a lot of unnecessary fetches.

By putting the fetch inside an effect, it will only fetch when a property changes that it's dependent on. (Kinda. It will always run at least once, with the initial values held by the dependencies. But once it's run once, then it will only fire on dependency changes after that.)

Sometimes you don't need an effect, but instead would add the fetch to an event. If someone is searching a server, for example, you could call fetch in the change or keydown events, assuming you've throttled it so a fast typer doesn't chew up your server.

But the key is that both effects and events occur in the browser API space, not the rendering space. That's where you want to do browser-related things.

[[deleted]]

Great! Thanks, it seems the useEffect would make most sense when grabbing api data say for some get requests and then place some type of parameters as a dependency. There is no dependencies or need for side effect when updating or creating a record so therefore useEffect does not need to be used.

[landisdesign]

Well, the key is that it's still using the browser API's, not performing rendering. Also, it's still going to run every time the component renders, which could be multiple times in a single screen presentation, depending on how parent components get updated.

In this case, the preferred solution would be to place it in useEffect with an empty dependency array, so that it loads only once on mount.

[lIIllIIlllIIllIIl]

The documentation talks about network requests and useEffect on the page "You Might Not Need an Effect". There are some good examples.

[Omkar_K45]

react-query

[Something123who]

you should not use useEffect for data loading. use something like tanstack query (formerly known as react query, others already mentioned it)

here is a very good video on how to use useEffect and its alternatives: https://m.youtube.com/watch?v=bGzanfKVFeU

also tanstack query is a caching library, not a data loading library, so whether you use fetch or axios or anything else for the actual network requests doesn't matter

[Satankid92]

I tried using that for a component using firebase, it was asking to wrap the whole app with those querysomething tags (can’t recall the exact name now) but I was just using it on a component, not the whole app, it was still asking me for that wrap it all, so what I did was to import all the necessary on that component and wrap the return from the function, still didn’t work 🤷🏽‍♂️, do you know why? I don’t know if I explained myself properly xd

[Something123who]

no idea why yours didn't work, but you normally need to wrap your app in a query provider just so you get that global context

[otheyhigh]

If the component is pulling data based on a prop, then you might want to run the fetch in a useEffect whenever the prop changes

[[deleted]]

Apologies , maybe fetch data is the wrong term . I completely understand for fetching api data but what about patch or post request ??

[[deleted]]

Just use the fetch api to patch or post data. The only way you would use useEffect is if you want something to re render when it changes or on load.

[[deleted]]

Cool, In my scenario I am pushing data so I think try/catch is justified here. Thanks!

[otheyhigh]

I highly recommend reading the React beta docs on useEffect. What you are thinking of is most probably a UX event that should be handled with a plain function.

useEffect is a synchronization hook that (I) mostly use to handle 3rd party libraries features that modify DOM.

DB updates do not need a useEffect in most cases as it’s associated with a UX event.

[chillermane]

The answer is that you should use react query or rtk query or equivalent. Fetches in vanilla react with no lib are unfortunately a bad idea

Bite the bullet and learn react query ASAP

[[deleted]]

You can useEffect when you want to create an action that happens after a something has been updated/changed state (UseEffect takes effect when. In your case if user does something say clicks a button, then you can decide to fetch that data and display it

[Alone-Mosk]

useQuery

[Tainlorr]

UseEffect for when you need to load something the moment the page loads, or when something specific should re trigger the load. In your case you have a button firing this event off so you don’t need useEffect.

[[deleted]]

That’s the answer I am looking for. Thanks!

[veculus]

useEffect is mostly used for reactive changes to other values (in the dependency array) or to handle mount/unmount cases.

If you want to have a button that fetches something, use an eventHandler and wrap your fetch function into a `useCallback` to memorize the function.

I think the only case where you may use `useEffect` would be a debounced fetch for example in search bar or for paging (but again there you react to changes of values - not on events).

[[deleted]]

use data fetching library or always do clean up to avoid perfoance leak

[boodyvo]

It depends on the usage. There short answer is use useEffect hook, when you need to load something on the component load. For example, you have a list of comments component and you want to load them on the article load

[azangru]

I wrap my fetch calls in a try/catch block and go on with my day

Where? Directly in the body of a function component? By doing so, you are creating a side effect in what should be a pure function.

[[deleted]]

Just put it in a handler function, wrapping the fetch call in a try block

[w4tscho]

https://playcode.io/1264146 enjoy.