Modern Data Fetching in React (Complete Guide)

[@EyalCumartesii]

Man, you deserve way more views. It's unreal how much quality you put into your content. I've been following you since last year, and I really appreciate not just the knowledge you have, but also your ability to teach it-which are two different skills

[@cosdensolutions]

thank you for the kind words! I'm getting very close to 100k so I'm very happy with that for now :D but I will continue on this path and keep trying to get better!

[@samnmeje3486]

so apparently we should use react query , got it

[@justin.johnson]

Naw

[@bbarreir0153]

The js way: don't implement it yourself, use a library

[@williamscott3673]

If you don't want to use react query, writing your own useFetch hook is super easy! Return loading, error, and data. So simple that GPT could write out a nice hook for you. I think, for many small apps, react query is overkill!

[@SitSkw]

I remember the first time I saw the react-query lib - it was like a magic I needed

[@riordan381]

Its the best . You can even further make it reusable by making a get and add/update config So you dont have to make a file directory for queries files

[@jennifermagpantay7933]

Exceptional content and very clear!!! Loved the comparison among the possibilities to fetch the data. For people like me, that is still learning, it is a great way to undestand the differences, pros and cons! Congrats and thanks for sharing!

[@nabarretetech]

Nice tip, will apply on my next project, thank you

[@fata__morgana]

The quality of the content is amazing, well done!

[@Mylordkaz]

interesting, I always fetched like your third example, and cache the data then my components take what they need from the cache. I will have a look to useQuery

[@nakulb4104]

Thank you so much for posting such informative content

[@mDHARYL]

In my next js project i use react query to fetch data. But i use server action to mutate the data into the server. React query can easily handle pagination 😊 Thanks darius

[@stevebuonincontri6853]

Also React query looks nice - I have also been waiting to use something more fine grain than the monolithic redux.

[@sumedhpawar3769]

Go in more details with react query and nextjs(ssr,csr) You know something like how can we perfectly use all the react query features without loosing ssr in nextjs in best and optimal ways

[@imamansoni]

Just noticed, Your voice matches so much with the "Awesome" yt channel guy

[@Dom-zy1qy]

Aint it crazy how many videos there are on "how to fetch data in react"? No disrespect to you Codesen, you actually make some of the best information videos in the react community. But things seem more complicated in JS than they really should be. Usually though there's a reason for why things are the way they are, maybe I just cant see it. I ended up switching my focus to low level languages, and all of this Javascript stuff seems so odd now. I feel like If i went back to front-end, id try to throw my own crappy framework together instead. Maybe this is how all of the JS frameworks are born?

[@cosdensolutions]

Oh yes, JS is a total mess unfortunately. I also don't like it tbh, but it's the only thing we've got. For what it's worth, I'm mostly in the React Native world, which I like more as it is a little different than web stuff

[@TechSpot56]

@@cosdensolutions Then We would like some react native content as well.

[@LukeCreates]

Hahaha, this is genuinely one of the best comments I've read as a commentary on the modern frontend ecosystem. I think you are dead on.

[@Mylordkaz]

I agree with you... I switched backend, and if I have to do some frontend I use React as it's what I am the most familiar with, but it always consume my time like crazy... -_-

[@MrMudbill]

Unpopular opinion, but a dynamic front-end is more difficult to program than a solid back-end. I think the reason people see back-end as more difficult is because the risk for damage is greater if you do something wrong. Data fetching in JS is very complicated, yes, but so is data fetching in pretty much any language, if you want the same set of features. Data fetching includes two of the most complicated programming concepts - caching and asynchronous programming. In a back-end, you can program mostly synchronously by fetching data from your own layer, or at the very least the latency is very low, so there's often no need to implement every exceptional situation. The front-end is more fragile, and requires extra massaging to provide a good user experience.

[@crim-son]

A lot less code❌ A lot more code under the hood✅ Thank you so much!!

[@sahajranipa]

In the last example what if we want to fetch data for individual page parameters what should we have to do in that case

[@deepeshpakhare]

I am going to join your course Project React! (Let me have some time n money ;))

[@mikaborosh4190]

I love your videos! Please keep making more

[@cyberblitz]

Hmm, what about server actions? Without API calls?

[@kashmirtechtv2948]

BRO LOVE

[@Pareshbpatel]

Excellent turorial on fetching datain React, using modern techniques. Thanks, Darius. {2024-09-24}

[@SinaSoltani-tf8zo]

3:40 Caching is not the responsibility of the FrontEnd. FrontEnd is just a UI which makes it easier for users to work with BackEnd functionalities and services. FrontEnd doesn't make any Business Logic decisions such as Caching. BackEnd decides which contents to cache and how long to cache it.

[@drrandom1259]

I don't understand you. Caching should be done in any application. Backend should cache db queries and things like that. Frontend has to cache backend fetch results. Frontend is just a UI but do you want to request data every second wasting bandwith and server resources?

[@SinaSoltani-tf8zo]

@@drrandom1259 "Caching should be done in any application" This is a web development devided between a BackEnd and a FrontEnd. There is no such thing as APPLICATION here. It's not a Desktop application. "Backend should cache db queries and things like that" BackEnd doesn't cache DB queries. It caches anything that is going through HTTP Response. It can be html, json content, pictures, audio, anything. "Frontend is just a UI but do you want to request data every second wasting bandwith and server resources?" Decision to cache anything in FrontEnd is a Business Logic for a specific content that only the developers and owners of that specific product can make. If they think something is never going to be changed in their product, then they can make a decision to cache it in the Client. There is no GLOBAL decision or rule that says content must be cached in Client. Caching anything in FrontEnd means they have to implement a Signal functionality between Server and Client for every content they have cached, to check if anything has changed and they must fetch the data again.

[@VerticalHub1]

This method is efficient and I can see a possibility of introducing localStorage and use context do we still need redux

[@candyman3537]

Tanstack query will handle cache. But when data changes, how will Tanstack query know and get data from server instead of from cache?

[@wuhaoecho]

I think understand this is the aha moment to understand react query. In mutation, add invalidation. such as, queryClient.invalidateQueries({ queryKey: ['todos'] }) queryClient.invalidateQueries({ queryKey: ['reminders'] })

[@joleDEV]

there is a timer when the data is stale, it will refetch the query. This can be set globally for all queries or individually. He briefly mentions it in example 2 together with the garbagecollection. You can however refetch the query at anytime yourself by calling the invalidateQueries or refetchQueries methods.

[@kaluczadzsi]

Could you make some junior code refactoring videos? Love your content

[@cosdensolutions]

I have some! Just search refactoring on the channel

[@stockmarketwizard9781]

Wow!! great video explaining the better versions of data fetching. One question though? what if data on my backend changed, but I'm using useQuery, so do the updated backend data is fetched or stale data is shown there? How much time does the cached data live by default?

[@cosdensolutions]

You can set your cache time and stale time as you need! Then they will be auto refetched in the background from the backend. So for example you can have it never cache and always refetch so you get latest data

[@stockmarketwizard9781]

@@cosdensolutions thanks. All I did until now was use the useEffect to fetch the data and make every data fetching component as client component in our Nextjs application. It hit home when you did the better versions.

[@iury664]

i've saw all the video but didn't get what the Modern way to data fecthing, it is query or cash itself ?

[@luisllaboj]

Hi, what’s your VS code theme? :o

[@stevebendersky2056]

does swr has the same functionality with caching (such as QueryKey in react query)?

[@samnmeje3486]

on react documentation website , they dont go into details about all this

[@Solo_playz]

React query is a separate data fetching Library not a part of react so that's why....

[@MohamedNafees-ye2oy]

can you post a webpack typescript react course ?, if you do so it would be awesome there is no a much detailed course on this topic in youtube

[@kashmirtechtv2948]

what do you mean by using framework like next js. i dont want to use next js then what should i do sticking to react?

[@joleDEV]

then stick to example 2

[@gokulkrishh]

Good one!

[@nickwoodward819]

nice vid, cheers

[@cant_sleeeep]

can you please answer this: if i have an app that will hold the cart state, updating cart etc should i use server components to manipulate the data? but i won’t have a global state then?

[@hammadXP]

You should probably use context or zustand as a state management solution for such scenarios, you can then access or update the cart state in a client component

[@hammadXP]

I've been through this headache where you start to avoid client components thinking that they might slow your app but believe me that server components will then make you feel like you're in a trap, it's okay to use client components and I actually prefer them more, use server components only when theres no interactivity, Edit: now that I've spent some good amount of time with NextJS, i think i prefer server components more, fetching necessary data in page.tsx and then passing to children (client) components, also fetching in children components with suspense, plus using unstable_cache with prisma db calls is the best performance combo, I'm moving away from react-query more and more

[@cant_sleeeep]

@@hammadXP thanks for the reply. now i am fetching inside redux thunk and storing as global state. for now i think this is the best way or idk if there is any other better ways. i tried fetching in server components and passing props to client components before but i didn’t have global state then. there must be a better workaround that i don’t know but for now i will stick to the redux toolkit approach

[@zhasulanserikov9890]

Cart is very dynamic page, it's literally Todo list, u can add update or remove items, so def client components

[@EricEGunes]

Redux is so much simpler than it used to be! I recently almost use Redux even simple applications!! You don’t need to worry about following nodes … anyone check the performance between useContext and Redux ?!?

[@irfansaeedkhan7242]

now we are talking , awesome explanation so I cannot use react query for API management in my nextjs apps right ? i need to call apis directly and map them ?

[@cosdensolutions]

depends how you want to do it. You can still use RQ even with Next.js, but the use cases are fewer

[@jazzmaster89]

Do you think it makes sense to use TanStack when our app already is running redux? Would RTK query be the better solution?

[@cosdensolutions]

Yes I would say so, especially if you store your data in redux when fetching

[@thecoder1631]

yeah if you are using redux stick to rtk query, it doesn't look as simple as tanstack but no need to add tanstack when you are already using rtk.

[@stevebuonincontri6853]

I got a little confused about what was the point comparing client to server implementation For years now client based rendering was acknowledged and shines. Server side is not as interactive. I know that the data can be fetched from client or server. Does the server render on a portlet level or does it render the complete page?

[@stevebuonincontri6853]

I am also trying to figure out whether I should learn Next.js - Besides search engine reg, what is the advantage?

[@kashmirtechtv2948]

@@stevebuonincontri6853 i have tried learning NEXT many times but every time I make decision to not go with NEXT ...........

[@C0D3O]

is there a text version of lessons included to follow along in your Project react course?? ( I hate watching endless watery videos although idk about your videos but still text version is a much more preferable and a quicker way to learn )

[@cosdensolutions]

The course is split in two. First you have the React theory, which is just videos with subtitles. But the rest, which is really the core of the course, is done in a custom application with about 100 different pages of text and code instructions + videos that walk you through all of it step-by-step. In that part the videos are optional so you could do the entire course text-based if you don't need the theory too much and just want to implement a big project

[@Bravin_Joshua]

Thanks a lot

[@tgctt665]

that's good content. Speaking of caching, how do you revalidate data ? Let's say you update some datas, and you don't want your user to "fetch" old data because of caching

[@joleDEV]

you just call the refetchqueries method in example 2.

[@songlyrics6612]

What about if did fetch my data in a JS file and than use it in another Jsx file ?

[@TechSpot56]

Informative content. should i use react query for registration and login ? since they are not frequently visited pages and caching doesn't make sense their. what do you think?

[@stevebendersky2056]

that's a POST request so it shouldn't be cached

[@ahsanabrar880]

yes can use for login and signup and also you can add no-cache in request

[@joleDEV]

for login you could look at next-auth if your using nextjs

[@ssygon2]

So is FetchExample2(running on client, that uses caching) , still better than FetchExample3(running on server, no caching)? Coz FetchExample3 always fetches from server, causes more load on the server & always shows the loading... text. Can you explain? Great useQuery example btw without use of try/catch 😊

[@oreip_]

You would choose based on what tools you’re working with. If you’re using NextJS which uses by default server components, you would follow example 3, if it’s a client side framework then you would use example 2. You could implement caching in both examples.

[@cosdensolutions]

Example 3 would usually have caching based on the URL from the framework (probably Nextjs). You can go deep into this to try to really squeeze out and optimize how you fetch your data, but honestly both 2 and 3 are fine, depending on what you're working on. I mostly use 2 because I'm in RN land not web

[@ssygon2]

@@cosdensolutions @oreip_ thanks both, yup I was thinking if I was using nextjs, whether it's still better to use example3, but with caching.

[@VerticalHub1]

Is useQuery better than axios

[@cosdensolutions]

not the same. You can use them together

[@VerticalHub1]

@@cosdensolutions ok thanks won't mind seeing that.

[@4v4]

how about increasing the font size

[@aminghasemi2621]

duuudeeee. That Persian Tattoo made my day. این نیز بگذرد 🥰 How did you get that?

[@cosdensolutions]

by a proper persian artist :D love that tattoo

[@aminghasemi2621]

@@cosdensolutions That is sooo awesome. Did you also know the meaning? Or they just chose it for you? BTW, I'm gonna sub the channel for that 😉

[@FuzzyAnkles]

@@cosdensolutions dope tat ;)

[@cosdensolutions]

Of course I know the meaning haha, I specifically seeked an authentic persian artist out for that. I love that proverb and really live by it. And it also meant a lot to me where I got it and where I was in my life at that point

[@navidghasemi9685]

​@@cosdensolutions ohh that's amazing to hear, This sentence is one of the most ancient sentences in the history of Iranian literature. there was a Persian king who wanted his poets to find a sentence that was well suited and compatible with every moment, and they found "این نیز بگذرد" as we can find happiness in sorrow and find sorrow in happiness and nothing persists.

[@erenyeager655]

if change ur network to fast 3g or anything don't close the panel it will not work to take effect

[@minhnhatnguyen8200]

I have a question that my app is about lms , i want to have SEO for the some page of it , but my ui lib is use MUI and just because i just need to SEO for some page do need to use nextjs now ?

[@joleDEV]

mui has nothing to do with SEO. You do however want a static page because a SPA cannot be read by google crawlers, because it is essentially an empty html with one div. you could use nextjs to generate static html.

[@harsh_g2543]

react-qeury vs apollo-client which is better for graphQL ❓

[@harsh_g2543]

also if am already using react-qeury in my project

[@youssefkhaled2113]

if i can fetch in the server and in the client how to combine both to get the best out of both like when to fetch on the server and when to do it in the client I find this decision confusing and feel the need for more examples to know when to use each type of fetch, for example if I have a page in my website that renders a user account what should use the server fetch or the client since both provides the same data and if there is another fetch on the subpages or subcomponents what method of both should I use

[@oreip_]

If it’s sensitive data then querying the information inside of server components is better because you can hide things like api keys. If a subpage also has fetch then you could use suspense, streaming, concurrent fetching techniques to render data on the browser even while the subpages aren’t done fetching.

[@cosdensolutions]

Don't think about it from "how to get the best of both". Always think about it from "what does the user expect" or "what does the project need". If user expects interactivity, use client. If not, use server. Architect accordingly

[@skyhigheagleer6]

The abort controller should be called in the return of the useEffect

[@omamokejeffrey5626]

So React query also does state management?

[@cosdensolutions]

async state management yes

[@Sabaq_Science_Academy]

swr are library made by vercel perform the same tasks, and this is the best approach to use such librarries for fetching data

[@LukeCreates]

You shouldn't make blanket statements about "the best approach", and I strongly disagree current day. When SWR came out, it was very exciting, especially for Next.js developers, given its tight interaction with the general Next/Vercel mindset. But... everyone knows that React Query won the battle, for better or worse. A pretty simple metric is that the last release for SWR was... February, and the last release for React Query was... last week.

[@joleDEV]

there is no best solution, it all depends on your needs

[@begoing07]

3 and a half minutes in and i know this is gonna be about react query

[@vramv9999]

react query or redux toolkit ? which is better

[@codesthenos]

do they do same? im begginner but i though redux toolkit was to have an easier way to create a reducer for the logic or your app, and react query to fetch data... but as said, I'm beginner, just learning

[@vramv9999]

@@codesthenos you can also use rtk query which is from redux toolkit to fetch data and it has the data,loading ,error,isError and more states and it also has caching

[@otis2646]

so it surely does not make another req to server if its cached ?

[@joleDEV]

unless its the query is stale it wont

[@mauriciomueller86]

On next 14, which is better combined with react query: axios or fetch?

[@kitchenanykey]

Using Axios should be easy, but in next.js fetch is more native and seamless.

[@thecoder1631]

fetch is native and does the job. ky is good alternative to axios. it also uses fetch under the hood

[@mauriciomueller86]

@@thecoder1631 tought the same. The only thing that I like in Axios is that I can create interceptors and config all API in my project easily. I have 5 different API on the system that I work lol

[@thecoder1631]

@@mauriciomueller86 yeah axios definitely shines with interceptors, you should check it out wretch, note i haven't used it but heard lots of good things about it. and looks easy to pick up. they also use fetch instead of XMLHttpRequests.

[@viveksah2069]

Why can't we make more simple use of reducer function in one class for CRUD request insted of doing all this try catch

[@aecsar]

Thanks!

[@nakulb4104]

Why do majority of the tutorials use the fetch api instead of axios or other http solutions? Can someone help me point to a right resource or clarify this for me

[@waleedsharif618]

I want to know this too

[@wgllgw]

Here's my 2 cents.. if anybody has a better answer please go ahead and correct me Axios is a third party library whereas Fetch is part of Web API(which is kind of an industry standard for browsers running JavaScript) The third method is XHR. This is part of node's http library.. so it is not really a third party library but it can be quite clunky

[@cannotthinkofanybetterhandle]

If it's a personal project, then either is fine else go for axios. Just search for fetch vs axios or why axios is better than fetch and you should find your answer.

[@cosdensolutions]

So fetch is built into node, which means no extra dependency. When the point of the video is to teach X, adding extra dependencies might confuse people and have them not focus on X but rather on why this dependency was used. Axios is great and I use it all of the time in RN. But if you're doing nextjs, you probably want fetch since they patched it and added more to it. Ultimately it's all about what makes sense for the project and both are fine

[@nakulb4104]

Thank you for the clarification​@@cosdensolutions

[@justin9494]

How to decide when to fetch on client or on server?

[@cosdensolutions]

when the user expects interactivity or not

[@justin9494]

@@cosdensolutions thanks!

[@Habesha_Today]

Dude what about redux saga

[@rogerramjet69]

just use openapi-fetch and be done with it and its type safe

[@Stefoux]

Why do you use interface instead type ?

[@cosdensolutions]

This was old code, I use type now for consistency but both are fine

[@nickwoodward819]

honestly, @13:30 I feel like using the loading component should have a minimum display time. flickering in and out quickly just feels janky. (not a you thing, obviously!)

[@harsh_g2543]

thats why we use skeleton loader instead of messing up layout with simple loading

[@nickwoodward819]

@@harsh_g2543 didn't know that handled it differently in terms of timing tbh!

[@justin9494]

thankssssssssssssssssssssssssssssssssss

[@tyafizi]

In the last example, there is no need to use Suspense for loading. Because in production there is no loading, since that server component is rendered at build time

[@linuhusainnk]

Best way to fetch data using apollo graphql in nextjs

[@AkinBelieve]

if you search up "Thinking in Relay" that's a viable option for you. You can do this with Apollo and something like GraphQL Codegen for type safety and fragment masking.

[@HoomaanHRG]

این نیز بگذرد

[@joshuagalit6936]

"A Modern Data Fetching" , Really? you don't know this?

[@Adamskyization]

I gotta be honest, there is a lot of "why you should use it" and almost nothing about how to use it, and how does it work, what other features does it have, how to install it, etc, nothing. SO it is really not a guide, and fore sure it's not a "COMPLETE GUIDE"

[@cosdensolutions]

How to use it = tutorial. Plenty of videos already on my channel on everything here. Guide = guide and explanation beyond just tutorial. Now you know