React Query: Fetch, cache, and update server data using queries and mutations | ReactJS Tutorial

if you've never used react query before and you watch this video all the way to the end i guarantee you're gonna walk away with probably one of the best tools that you can have for specifically for data fetching as well as maintaining that server state caching the duping optimistic updates background refreshes all that stuff is handled by react query and we're gonna cover every single one of them [Music] data fetching in react sucks i very much agree with this sentiment if you think about it when you're working with an api for example on a react application there's so many things that you kind of have to track right so for example you probably need to track loading state because sometimes data takes a while to come back to the client sometimes you also need to track error states you know you never know maybe a user loses internet connection or maybe your server is down there could be so many things that goes wrong and then on top of that you also have to think about things like caching and the duping especially when maybe you have users on a mobile application you want to watch out for using too much of their data right because they they probably don't want you to use too much of their data you know another problem with service date is as they kind of describe here is it's fundamentally different from client state right what do we mean by that so client state are things like is a modal open or closed is what is the current value of this form field you know those things that are fundamentally just maintained on a client whereas server state is usually something that is persisted remotely it's not under your control you know there could be other clients that's manipulating that data so if you're trying to create an application that is you know always up to date with the correct information or the most up-to-date information there's quite a bit more logic for you to add in your application so what we're going to learn in this video today is react query which is a library that specifically solves a lot of these problems it handles a lot of that server state management that you need to take care of and it does that in a very simple way that does not require a lot of configuration all right what we're going to do in this tutorial is we're going to create a basic application that uh a client app which communicates to a server and does a couple you know basic crud operations i have a very basic user's credit here that i made from another video but you can see you can create users you can get users you can update users you know your typical crud and the users has it only has a pretty basic data model it just has a string name and details field so first thing we're going to do is with react query you have to install react query itself and i already have a you know your typical basic create react app application that i'm just going to install react query on and in addition to that i'm also going to add axios which is a really good http client library or you can use fetch if you prefer that i personally like axe sears so i'm just going to install those two all right once that's finished installing the first thing i'm going to do is i'm going to i'm just going to create a an api file i'm going to call this users api dot js and i'm just going to import axios in here all right with that imported what i'm going to do is i'm going to create a axios instance that simply has the base url of that user's api that i have running locally and then from that we can create our api methods so for example i want to create a get users function here that simply returns api.get slash users right so it does localhost 3000 slash users because it's using this instance with the base url and then with axios usually it returns a response within data so i'm just going to return that directly so i'm going to do that then rest.data i'm also going to add one for getting the user by id which is just slash user slash id and we pass in the id as an argument and then finally i'm also going to add one for updating the user which simply kind of similar thing it just takes the id and we pass in the fields of the updated user so for example if we were to update the user's name or the user's details and notice that we changed the http method here to put and similarly for all three of these guys we just return rest that data so that's what we're effectively going to try and build in this tutorial is we're going to have a list of users and we want to be able to select individual users and view their details which will use this api call to get their specific details and then you know eventually we'll also write a little bit of logic to do some updating you know so this is kind of a snapshot of some basic crud all right now that we have that out of the way i'm actually going to go into index.js which is the very root of my react application and what i'm going to add here is an import from react query i'm going to import query client and the query client provider and first thing i'm going to do is i'm going to create a new query client and don't worry i'll explain this in a little bit and then we're going to wrap our entire application with a provider so this query client kind of acts as if you think about it as the the data manager for um all the things that comes back from our queries you know things that need to be cached any data that comes back really will be kind of in handle by this query client behind the scenes and you're going to see some examples of how to also manage that ourselves as we go through this tutorial and another thing that i recommend every react application that you use that's using react query to have is the dev tools which is very nice and useful and you simply add it like so right just put it side by side your application and you'll see this in action in a little bit if we run our application from here and open a browser on localhost 3000 what you'll see is just a basic uh pretty much empty application that just says learn react query and you'll see this little flower thing in the bottom that's the dev tools that we added and when you click into that it'll give us some information about what are the queries that it's making um we'll take a look at that we'll take a closer look at this as we use it later alright so we got a running application what do we need to do first so we talked about maybe creating a a list of users right so let's start with that so from here i'm going to create a new file called users.js and i'm just going to initialize this to a basic component function and here's how we're going to do api calls first you import use query from react query and then we're also going to import our api from our users api remember that we added a get users method in here so we're going to take advantage of that in a second and the way you use use query is pretty simple you just do like this so we're gonna destructure data which is the response and then we're gonna do use query and the first thing you have to provide here is a key and this is to be the key in the cache right now it's probably not going to make a ton of sense but you'll see why this is important later on but basically you need to provide a key that differentiates this query from all the other queries in your application and this is going to be useful later on for things like caching and invalidating queries and stuff like that the next thing we're gonna pass in here is the api call that we're gonna use so this is any async function you know it returns a promise in our case we want to do get users and actually i forgot to export get users so i need to make sure to do that alright so from here let's imagine that i'm simply trying to list out all the users that i have so maybe let's just do a basic you know if we have data let's map through it and let's take each user and print out their name so we're gonna do map each user to let's do an li element here and remember that you have to provide keys for lists so we're going to use the user.id here and then within this we're just going to print the user.name and so we can see this in action we're going to import our users component and we're going to put that in our root app component now let's actually take a look at the browser and see what we have you can see that i have mumbo and dumbo and just to kind of prove to you that this is coming from the api if i go to my api over here localhost 3001 if i do slash users i get back mumbo dumbo you'll see that there's id1 id2 and they each have their own details which will show in a little bit right so that's pretty basic it works great and we can also show the dev tools in action here if i refresh you'll see that it lists out by key the thing that we the query that we made and it also this is kind of a think of it as a replacement for the network tab and you know in your browser so it can show you the data right and it can also show you the different options about it and the different states that it currently has and in here you can even trigger things like you know maybe you want to refresh the data to kind of just see what happens and there's stuff here about stereo and fetching that we'll cover in a little bit alright so what else can you do with this and back in our users file another thing that this use curve returns actually is an is loading property which if you can use that to print out loading states you know like your spinners and stuff like that so for example we can just return a basic string of loading users right and let me refresh and that happens very quickly so let's see if we can simulate some slow network speed we're gonna do in the network tab we're gonna add slow 3g so this is kind of gonna simulate as if i have really slow internet connection which is gonna allow us to see that loading state in action so imagine you know maybe someone's on a 3g network on a phone you want to make sure you show those loading spinners alright so with that slow 3g enabled there well you'll notice when i refresh the pages it's going to take a little bit more time and it's going to show us our loading users for a couple seconds here and then it loads in our data right so this is a tap this is a pattern that pretty much any client application should have that react query kind of just handles for you same thing with uh if you if you have some errors so there's also an is error which also there is an error object here as well so for example maybe that the server goes down so for example you can also add another if here and let's just display a basic error message right so let's imagine that actually let's go ahead and turn off i'm going to turn off my api server my local api server and if we refresh our application here you're going to see that it's going to try and load the users again and then eventually it's gonna fail because the server is down right and it's gonna tell me something went wrong and there's also something to notice on the network tab actually is you'll notice that it actually automatically tried to attempt retrying the call automatically three times three or four times here and only until it was done retrying that it says that it's it's in an error state so there's also another thing that i haven't talked about it yet is that it automatically tries to retry for you those api calls that fail that's something that you can configure by the way but by default it's going to try a couple times so for example you know as an example of maybe some configuration i can add retry false here and what's going to happen here when i refresh is this almost immediately going to go into the error state and you'll notice that it didn't retry right so those are things that you'll you'll have to understand with react query is that there's a couple of things that are uh it tries to figure out what's a good default for everyone but it does give you also the ability to configure those defaults and we'll talk a little bit more about what those defaults are in a little bit but first we gotta focus on just the basic fundamentals here right just so you know i turned the server back on so that we can start going forward with the rest of this tutorial so this is really the typical structure for a basic use query usage right you just provide your api call you provide a key and then that gives you back data is loading is error and a couple other things but those are the main ones that you really need to keep track of and then you'll almost always really have a an is loading or is error check at the top here so that you can react to it and then if it gets past this that means that the data came back and you can go ahead and display it now there are other details for example this error object is going to contain you know the details of that error so if you want to have some some custom error handling you know you can take advantage of that value and then react query also supports air boundaries actually there's a there's a property you can turn on that will automatically just if there's an error in the api call it'll re-throw that error and then you know you can handle that using your error boundaries that's a little bit outside of the scope of this video so maybe i'll cover that in another video let me know in the comments if that's something you'd be interested in all right anyway so let's move forward here the next thing we're going to do is so we have a list of users what i want to do is i kind of want to split the page between a list of users and in a detail view you know so i want to be able to click one user and then as you click one user it shows the details of that user on the second half of the screen all right so the way we're gonna be able to pull this off is by adding some use date some local state tracking here so i'm going to add an import for use date and then i'm just going to add a user id and a set user id here right your basic use state and then we're going to pass down set user id in here so that our our user list has the ability to set the user id that we selected so really this is your selected user so then in our users component i'm going to add that in there and then what i want to do is maybe i'll add a button a button in here to do you know let's just say view right so i have a new button here and then on click that's where i'm going to set the id so set user id to the id of this current user and just to see to make sure that's working let's just print out our current user id selection all right so when i click one of these it's gonna show me one two you see over there we had a little bit of css to clean this up a bit so what i'm gonna do is i'm just gonna wrap the users list in a div and i'm gonna add a little bit of styling here let's move that users list within that wrapper right so i'm just adding a little bit of padding i'm going to set it to just about a third of the page and i'll add a border right so that we can kind of see a divider there and then let me make another wrapper for the details section we'll wrap our user id and that and then similarly this one we're you know add some padding there as well but we'll set it to take up the rest of the space all right so let's create our users details component so what this component is going to do is it's going to take that user id and then it's going to make a call to our api to get the specific user and the rest of its details so this should be taking in a user id prop and then similarly we're going to import use query and we're also going to import our api and then same thing we're going to do data equals use query and then remember the first thing we have to pass in here is a query key from the users.js we just pass in a basic string but for a a specific user query we need to provide a a more specific query key here for example something that utilizes the user id so we're actually going to pass in here a an array and it's going to be a combination of the string user and that user id and again this will be very important when it comes to things like caching which we're going to talk about in just a second here so in this case we have an api again just to remind we have a get user api method here that we just need to pass an id in so that's what we're going to do so we're going to do a function here and we're going to do api dot get user and make sure to pass in the user id now first of all our application the way it's currently set up is there's not always going to be a user id selected so we need to add a little bit of a cache here of if there's no user deselected then return let's just provide a message of select a user and then similar to the users list we're going to add an is loading state here again ideally in a lot of these you really should be adding you know is loading and is error typically in my own applications i would probably have the loading state there all the time but use error boundaries for error handling and then what i also like to do is i usually rename this data to be a little bit more specific right in this case it's really the user and once you have that down here we're just going to display the user's name and details all right so now that we have a basic user details component we're going to bring that into our application similar to how we did with the users list and we're just going to put that in our second div in here and then remember that we need to pass in the user id that was selected all right let's take a look at how our browser looks so far so we got our list on the left and then on the right it tells us to select the user because we didn't select anything if i select mumbo it's going to say it's loading user details and then eventually the data comes back right we got our name and details over here now you'll notice it's hard to see here so let me expand a little bit but you notice we have some errors here because it's actually trying to call the u the get user by id a little too early even before it had an id available so why is that that's because when you have used query like this it's immediately gonna try and make that call and there's two there's one way to prevent that you can add an option object here so for example if i add enabled false this is going to completely prevent it from running but we still want it to actually run only when we have a user id provided right so what we're going to do here is we're actually going to turn this into a dynamic value of boolean user id right so as long as we have a truthy user id this is going to work obviously it won't work for an id of zero but let's just assume we don't have that because our first user in a database has an id of one all right so just to be sure that this is all working back in our application you'll notice that when i select mumbo it's going to load user details and then eventually the data comes in right and looking at our network tab no problems now let's talk about a little bit about some of those default configurations or settings that react query provides for you so in the documentation in react query there's this section called important defaults that you absolutely should read through it talks about how it has some pretty aggressive but sane defaults what are those things so that includes for example we slightly talked about it where it automatically tries to retry three times right that's one of the defaults it also says that inactive queries are garbage collected after five minutes what does that mean so for example in our application if we open up our dev tools here you'll notice that when we have mumbo it's it adds it to our query client with the key of user and then the id of one right and you'll see that here too it has the data mumbo but what happens when we switch over to dumbo it's gonna make another call and it's gonna call it's gonna update the query to be user with id of two right and it has that data of dumbo but what happens is that data that we had before is kind of cached for five minutes you'll notice that it's gray because it's being marked as inactive once something goes into inactive by default after five minutes that data is going to get deleted but if for some reason maybe the user goes back to that page so for example if we go back to mumbo it's automatically gonna one mark that as active again and then two it's gonna do a background refresh plus it's also gonna take advantage of what the previously cached data was so for example you'll notice that as i click between mumbo and dumbo here it's very quick right there's no loading state because it's taking advantage of the data that was currently or that was previously saved in our cache which doesn't get garbage collected until after five minutes while it's in an active state so for example if i just sit on mumbo for five minutes eventually this data from dumbo is gonna get garbage collected it's gonna be deleted but if i go back to it within five minutes it's gonna reuse that data and then when i switch to it you'll also see that it's going to go into fetching so first it's going to grab back the cache and it's going to show the user here's the old data that you have and then behind the scenes it's going to fetch to make sure that it has the current data and it's gonna update the the entire thing right so to better kind of articulate this there's actually another property that you can bring in here called is fetching and just so that we can see this working in action we're gonna add if it's fetching we're gonna add we're just gonna display a message that says it's background refreshing right so let's try to see how this works because i don't know if i explained it well but as i kind of go back and forth you'll see that again i'm able to switch between the two very quickly because it's utilizing the data that's already there so it makes the it makes the application very snappy almost because first it shows all data and then it does a background refresh to make sure it has the most recent data and then when that comes back it updates the ui again right so as i click it shows background refreshing and then eventually it stops right and you can see the calls being made as well on the network tab there's also a couple different places where it tells you other situations that might trigger a background refresh so for example one of the way in ones that are that's easy to demo here is window refocus so for example when i click back into my tab here you'll notice that it's gonna say background refreshing right let me do that again i out i'm out of focus i'm back in focus and it's refreshing so every time it goes back to the application it's gonna try to get the it tries to make sure that the data is up to date basically which is a very nice feature again a lot of this stuff um i recommend you read through it to understand a lot of the other defaults they are like it says they're aggressive but saying defaults and i would agree with that but know that you can configure a lot of these stuff all right so where do we go from here so far all we've done so far is just basic reading data right what if you want to manipulate data you know remember that we also added a method here for updating the user so that's another use case that we're going to try and code out in this tutorial so what i'm going to do is i'm going to create a new file here called user form and this is going to include basically just a form of the fields that we can update for a user i'm gonna add a little padding here and basically we're just gonna make it we're just gonna make a basic form and actually before we get started let's kind of set up our state management so for this user form to be able to do updates it first needs to have the values of the original user right so we likely should be passing the user in here as a prop and then we're just going to add a basic use state hook like so so that we have a copy of the user fields and then we're going to be able to manage those fields from this form and then we'll add some on submit logic in a little bit i'm also going to add a basic handle change you know so that our our input as a user is typing into it and we're able to update the fields object and then i'm also going to add an event handler for submit that we're going to pass into our form over here on submit handle submit right and all that's doing now is it's going to print out the fields all right so we're going to what are we going to put in our form so first of all let's add a an input box for the user's name here we go so it's just a basic input with name name and it has the value of fields that name on change is going to use that handler we made up here and then it just has some basic styling to set the width and stuff like that all right next we're going to add a basic text area that allows us to update the details of the user and then finally we're going to add a submit button right for us to be able to trigger this on submit by the way i'm speeding through this because i assume you know how to write forms in react i kind of want to make sure we focus on the react query bits specifically but if this is completely new to you uh the react documentation does have really good docs on how to do forms all right now that we have a user's form user form we're going to import that in our user details file and something we need to add in here is basically i want to be able to switch between the details and the editing form maybe using a button so we're going to add some state in here again so bring back the hue state hook and i'm just going to add a basic state here that is a boolean of is editing which we're going to able to kind of toggle on and off using a button so i'm just going to replace this background refresh message i think you guys get the point there right and i'm just going to replace that with a button that kind of allows us to toggle between editing and viewing details and then using the value of that is editing boolean we're just going to switch back and forth between our user form all right so if it's editing we're going to do users form and make sure to pass in our user otherwise we're just going to print out what we had before all right and actually while we're here we might as well pass in our set as editing here because the form itself needs to be able to toggle that state right so for example once we submit we're going to make an api call to do that update and then when it comes back we need to be able to toggle the editing back to false so that we show the details let's take a look at what the ui looks like so far in the browser so when we select mumbo it's going to load in that side and then now we have an edit here and when we click edit it's just going to bring us that form and you know we can kind of toggle that state from details to form now right now our our form doesn't really do anything if i hit save here it doesn't actually make that call to api yet it just console logs are our details our user object so this is where uh react query comes in again which we're going to introduce the [Music] the use mutation hook right so use query is obviously for any kind of get call that you need to make and user mutation is for anything that has to do with you know changing or updating data in your database or wherever else so basically any probably any right events that you need to do we'll use use mutation so the api of use mutation is kind of pretty similar right so you can also do a disk structuring object like this which has properties is loading and you can do use mutation and then you simply pass in your your api call so in our case it's update user which we actually need to import and we forgot to do that now you might be wondering how do we trigger this mutation to run it so in this case right the mutation shouldn't necessarily run immediately like a query does we actually want the mutation to trigger when we wanted to so for example in our case we probably want to trigger that down here right in the handle submit so what you can actually destructure out of here is a mutate function we're going to take that and we're gonna call that down here and we'll pass the fields in here so the first argument that you pass in here ultimately is what gets passed down to your api call so for example in our case here we're really passing down the user object which has you know the id and the name and the details which is why here we're just doing mutate fields right it kind of just forwards it down so that kind of makes the api really nice and clean and then there is loading state here you can use that as a way to tell you know another kind of similar to our query stuff right if you want to show the user that hey we're we're saving this data right now wait a little bit and we'll tell you when it's done you can use that as loading state so for example maybe we're going to do something like if is loading we're going to say saving your changes and actually i forgot my return here all right let's take a look at how this works so back in our application let's select mumbo and i'm gonna edit and i'm gonna do i'm gonna update the details here to something new and i'm gonna hit save and you'll see it goes into saving your changes and then goes back to our form but there's a problem here notice that when i hit cancel and go back to the details view we have stale data it still has mumbo right but if i you know click out of it and back into mumbo it should automatically update because of the background refresh but that's not really the behavior that we want right we ideally want that to update right away so how can we improve that there's two strategies you can use here the simple one is we can tell use query that hey after this mutation is done and validate my previous query for this user so that it automatically right away makes a new call to update that data how do we do that so the way to do that is simply you can pass in a configuration object in here and you can there's like different hooks that you can use so for example there is an on success you can provide and on success we can do a couple useful things in here so another thing right is we we said that we passed in set is editing earlier we probably want to set the editing to false on success yeah right once it's done saving our data we want to go back to the details view not the form view so that's one thing and then also we can do some trigger the old data to be updated right so how do we do that well remember that our application is kind of wrapped with a query client you can get access to that query client using use query client so i'm going to add another hook here and i'm going to import use query client from react query so this allows us to kind of have access to that cache that query client you know this query client can do all sorts of things like for example if you want to optimistically update the data or maybe you just want to get data that's in that cache and use it somewhere else you know it effectively acts like a global store if you want to think about it that way but one of the things you can do with this is you can do query client dot and validate queries and we can provide here the key that we want to invalidate so in our case we want to invalidate the user with the user id that we have here right let's take a look at how that before how that behaves differently now all right so back in the application if i go into edit mode and update the details here i can change this to you know i got updated and i'm going to hit save and this is going to load for a little bit but notice what happens as soon as i hit save it's still going to show me the old thing but notice that it immediately got updated to what we updated to because it immediately triggered an update and we didn't need to click in and out of mumbo to trigger it right it still it got updated um and because we had the throttling here enabled that kind of made it more obvious on a really fast internet speed people won't even notice it'll just update automatically so let's try that again all right i'm going to hit save and it almost seems instantaneous right because it loaded it saved and then it came back and updated the data but that's probably not always the best thing to do that's that that's an easy way to kind of get around it so let's bring back our slow 3g here another thing you can do is uh what's called optimistic updating which is basically you're going to update the data right away for the user so it it makes it seem as if even if they're even if their internet speed was slow it comes off like their change got saved right away so how do we do that so back in our code what we're going to add here is an onmutate function and we're going to use the query client again to set the data right what this is going to do it's going to immediately replace the data that was there so using the key that we have which identifies the data that we have cache for this user we're simply going to pass in updated user and this updated user is going to come from the argument here so this updated user object is basically what you passed in to mutate here right so we're going to basically tell the user or show the user as if the the thing that they had saved on immediately what they typed out is what's going to be on the screen so over here in the query client we're basically looking at what's the old cache data we're going to immediately going to replace that with what got submitted on the form the other thing we're going to do here is we're going to move this set as editing files up and on mutate because in this case we don't really need to wait for the the loading to be done right we just want to show the user right away that uh hey optimistically updated your your data to this like as if we told them that it happened right away i also need to comment out this is loading state just so you can kind of see the optimistic happening the optimistic update happening in real time so back in our application when i go into edit mode and i switch to another change here when i hit save it immediately went back to the details view and the data is immediately up to date and in the background it's going to do the refreshing it's going to do the actual mutation and eventually it's going to you know sync everything back up right because i have on success here i'm still saying that i'm invalidating the query so that eventually even though we optimistically updated it's still gonna background refresh for me there's also other things you can do here like for example you obviously can't always assume that the the api call is going to work right so there's there's a situation where if you optimistically update um what if it runs into an error you technically should revert the data back to what it was originally and there are some documentation on the react query site about how to do this so if you search for the optimistic update section you'll notice that you know there is a way for you to get the snapshot of the old data and then you can kind of provide some context of what that old data was and on air you can set the data back to what the snapshot was and really quick before we wrap up here uh one thing that i forgot to mention is that you can also just decide to set the data on success that way you kind of don't have to worry about the scenario what happens if it doesn't work right like if there was an error in that request so what we can do is we can actually also move the set query data down here on success and this actually also returns the response via the first argument here so we'll take that data and replace this updated user here or you know you can use that same name if you wanted to but i wanted to call out that this is different this is the actual response data this is different from the request data that we're sending out right so this is what it comes back with after the request completes so if we're doing that you know and assume that we're getting the right data back we don't really need to invalidate it anymore so we can get rid of this and then just to kind of bring back our commented our changes here let's bring back our loading because this one we actually do want to show in this case that hey your thing is being saved right now wait a little bit and we also actually need to move this set as editing down here because remember that if we're not in editing mode we're no longer in this user form which means that it's not gonna show us our saving changes you know it's loading message so we're just gonna completely get rid of this and mutate since we're not using it so again to summarize when we hit save on the form it's going to send that request and then it's going to use mutation it's going to say is loading is true it should show our message and then eventually the response comes back and we save that response data into set query data which allows us to update our cache our data store and then it all should look pretty good so back in mumbo i've got slow 3g enabled so i'm going to go into edit mode i'm going to change the details to something else again i'm going to hit save you should see that's going to say saving your changes and then it comes back and the response is used as the actual data itself so this is probably the primary way that i would recommend most people do it is you know just utilize the data that comes back on success to update your query client data but if you have requirements to make your application seem a little bit more snappy you know you can do optimistic updating you just need to watch out for the scenario where what if your api request fails make sure you handle that all right so that's really it that's the basics of react query if you know how to do use query and use mutation that's honestly 90 of it the rest of it is just probably uh changing some settings on when things trigger or not trigger or maybe your different caching um you know if you want to change how long something is cached and stuff like that those are all configurable with react query you know there's other things you can do like what if you want to do uh dependent queries right if you want to have two queries kind of run one after another and stuff like that lots of good stuff in the documentation here that i don't think i need to to cover because it's already well documented and this video was really meant to just be kind of an introduction right but it has some docs on a lot of the things that you would expect a library like this to have right so like how do you do pagination how do you do infinite queries right so for example if you have like infinite scrolling um lots of good stuff in here that i recommend checking out i think one important thing to discuss here is to kind of going back to what we started with is kind of what it what's the point of react query right the point of react query is that you know a lot of a lot of the server stuff has completely different concerns from your client stuff so again like we talked about you you have to think about the duping you got to think about caching and stuff like that background refreshing you absolutely can do this stuff with your basic you know use state and use effect or redux and you're gonna it's probably gonna be really complicated you're gonna have to add a lot of extra logic because those solutions were not made for specifically for making api calls and maintaining data from your server so react query is specifically made for that purpose so if you think about it in a typical react application if you take a lot of the the server specific state that you usually would maintain in redux or something similar and if you let react query manage that state you'll find that the remaining state that you have the client the client specific state that you have is actually going to be really small that you might not even need redux anymore you can just use something smaller like your basic use date use reducer or just stand or joe tie some some of this small libraries that i've been making videos about recently so this is a react query is a tool that you absolutely in my opinion should have in your tool set because it just makes all this api server state data management extremely simple and then it makes the rest of your state management code simpler as well anyways guys that's it for this video uh if you found that to be a good video make sure to leave a thumbs up and if you want to see more of this type of content you know react node javascript stuff that's all the stuff that i make so make sure to subscribe if you want to see more with that said i'll catch you on the next one thanks [Music] you

Channel: Marius Espejo

Views: 8,772

Rating: 4.9322033 out of 5

Keywords: reactjs, javascript, react, react js, reactjs tutorial for beginners, reactjs tutorial, learn reactjs, react query, react query tutorial, react-query, react query vs redux, redux, react redux, react redux tutorial, react redux tutorial for beginners

Id: aLQbVd-2tIo

Length: 45min 53sec (2753 seconds)

Published: Sun May 02 2021