React Query in 100 Seconds

react query a react library that simplifies the way we fetch cache and synchronize data from a server react itself has no opinions about how you fetch data from the front end the most basic approach is to use the browser fetch api when a component first mounts and use effect then manage the response with use state that works but becomes increasingly difficult when requirements like caching retries and deduping come into play react query not only simplifies your data fetching code but also handles these complex requirements out of the box for example you might want to refetch data when the user leaves and then comes back to the same window fetch on windowfocus handles that for you if you're building an infinite scroll feature the use infinite query hook will make your life much easier or if you're writing data to the server you can make changes appear instantly in the ui with optimistic updates and you can debug all your data fetching logic with its integrated dev tools they've thought of pretty much everything and it's so good at what it does that it might even eliminate your need for a global state management solution to get started install it with npm then instantiate the query client and provide it somewhere in your component tree now every child component will be able to fetch data like a pro also add the react query devtools here to debug and development now define a function anywhere you'd like to fetch data from your server and the component that consumes that data add the use query hook it takes a key that allows react query to manage this data efficiently then the data fetching function as the second argument it will make the request then return the data and also the status of the request if it's loading we show a loading screen if the request fails it will actually retry the request three times and if it still fails at that point the status will change to error now if it was a success we can render out the data in the ui and that's a lot of functionality with not a lot of code but you might be wondering what this key is all about well now let's imagine that we want to update this data on the server to handle that we can bring in the use mutation hook when data is written to the server we can hook into it with the on success function and automatically invalidate the query we already made based on its key this tells react query to invalidate and refetch the original request and we can even tap into the state of this process by referencing is fetching from use query to keep tabs on the loading state now if you want to run multiple queries in the same component you can easily do that and it will automatically run them in parallel to ensure optimal performance but sometimes one query might depend on data from another like all the cars owned by a user that's also made easy with the enabled option like i said before they've thought of everything this has been react query in 100 seconds if you want to see more content like this enroll in my full react course on fireship io that breaks down a ton of react concepts in 100 seconds or less thanks for watching and i will see you in the next one

Channel: Fireship

Views: 609,265

Keywords: webdev, app development, lesson, tutorial

Id: novnyCaa7To

Length: 2min 32sec (152 seconds)

Published: Tue Mar 08 2022