React Query is a tool that makes your data fetching code faster, easier, and more powerful. Learn how to use React Query it in a real application in the Full React Course  https://fireship.io/courses/react

#js #webdev #100SecondsOfCode

🔗 Resources

React Query Docs https://react-query.tanstack.com/
100 Seconds of React https://youtu.be/Tn6-PIqc4UM
Fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- React Query tutorial
- How to fetch data in react?
- Advanced data fetching in JS
- Implement infinite scroll in react
- How to implement optimistic updates in react
- Alternatives to react redux
2024-02-04T05:32:14.071Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
12b933c9-0e14-424e-9fb0-cb6a18aa427f
4b2d674d78d464f3e78eabbdb395588303228ae6aa66902b9c7396e43ec68d17
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
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 useEffect, 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 are data fetching code, but also handles these complex requirements out of the box.
For example, you might want to re fetch data when the user leaves and then comes back to the same window.
Fetch u on window focus 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 you 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 Dev Tools 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 3 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 you're ready 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 wanna 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.

Speaker 0: 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 useEffect, 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 are data fetching code, but also handles these complex requirements out of the box.

For example, you might want to re fetch data when the user leaves and then comes back to the same window. Fetch u on window focus 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 you 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 Dev Tools 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 3 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 you're ready 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 wanna 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.
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 useEffect, 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 are data fetching code, but also handles these complex requirements out of the box. For example, you might want to re fetch data when the user leaves and then comes back to the same window.
data management
Fetch u on window focus 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 you 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.
data management
software
software development
Also add the React Query Dev Tools 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 3 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.
data
data management
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 you're ready 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.
databases
programming
Like I said before, they've thought of everything. This has been React Query in 100 seconds. If you wanna 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.
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 useEffect, 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 are data fetching code, but also handles these complex requirements out of the box. For example, you might want to re fetch data when the user leaves and then comes back to the same window. Fetch u on window focus 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 you 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 Dev Tools 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 3 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 you're ready 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 wanna 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.
React
react
Query,
query
a
a
React
react
library
library
that
that
simplifies
simplifies
the
the
way
way
we
we
fetch,
fetch
cache,
cache
and
and
synchronize
synchronize
data
data
from
from
a
a
server.
server
React
react
itself
itself
has
has
no
no
opinions
opinions
about
about
how
how
you
you
fetch
fetch
data
data
from
from
the
the
front
front
end.
end
The
the
most
most
basic
basic
approach
approach
is
is
to
to
use
use
the
the
browser
browser
fetch
fetch
API
api
when
when
a
a
component
component
first
first
mounts
mounts
and
and
useEffect,
useeffect
then
then
manage
manage
the
the
response
response
with
with
use
use
state.
state
That
that
works,
works
but
but
becomes
becomes
increasingly
increasingly
difficult
difficult
when
when
requirements
requirements
like
like
caching,
caching
retries,
retries
and
and
deduping
deduping
come
come
into
into
play.
play
React
react
Query
query
not
not
only
only
simplifies
simplifies
your
your
are
are
data
data
fetching
fetching
code,
code
but
but
also
also
handles
handles
these
these
complex
complex
requirements
requirements
out
out
of
of
the
the
box.
box
For
for
example,
example
you
you
might
might
want
want
to
to
re
re
fetch
fetch
data
data
when
when
the
the
user
user
leaves
leaves
and
and
then
then
comes
comes
back
back
to
to
the
the
same
same
window.
window
Fetch
fetch
u
u
on
on
window
window
focus
focus
handles
handles
that
that
for
for
you.
you
If
if
you're
you're
building
building
an
an
infinite
infinite
scroll
scroll
feature,
feature
the
the
use
use
infinite
infinite
query
query
hook
hook
will
will
make
make
your
your
life
life
much
much
easier.
easier
Or
or
if
if
you're
you're
writing
writing
data
data
to
to
the
the
server,
server
you
you
can
can
make
make
changes
changes
appear
appear
instantly
instantly
in
in
you
you
UI
ui
with
with
optimistic
optimistic
updates,
updates
and
and
you
you
can
can
debug
debug
all
all
your
your
data
data
fetching
fetching
logic
logic
with
with
its
its
integrated
integrated
dev
dev
tools.
tools
They've
they've
thought
thought
of
of
pretty
pretty
much
much
everything,
everything
and
and
it's
it's
so
so
good
good
at
at
what
what
it
it
does
does
that
that
it
it
might
might
even
even
eliminate
eliminate
your
your
need
need
for
for
a
a
global
global
state
state
management
management
solution.
solution
To
to
get
get
started,
started
install
install
it
it
with
with
NPM,
npm
then
then
instantiate
instantiate
the
the
query
query
client
client
and
and
provide
provide
it
it
somewhere
somewhere
in
in
your
your
component
component
tree.
tree
Now
now
every
every
child
child
component
component
will
will
be
be
able
able
to
to
fetch
fetch
data
data
like
like
a
a
pro.
pro
Also
also
add
add
the
the
React
react
Query
query
Dev
dev
Tools
tools
here
here
to
to
debug
debug
and
and
development.
development
Now
now
define
define
a
a
function
function
anywhere
anywhere
you'd
you'd
like
like
to
to
fetch
fetch
data
data
from
from
your
your
server,
server
and
and
the
the
component
component
that
that
consumes
consumes
that
that
data
data
add
add
the
the
use
use
query
query
hook.
hook
It
it
takes
takes
a
a
key
key
that
that
allows
allows
React
react
Query
query
to
to
manage
manage
this
this
data
data
efficiently,
efficiently
then
then
the
the
data
data
fetching
fetching
function
function
as
as
the
the
second
second
argument.
argument
It
it
will
will
make
make
the
the
request,
request
then
then
return
return
the
the
data
data
and
and
also
also
the
the
status
status
of
of
the
the
request.
request
If
if
it's
it's
loading,
loading
we
we
show
show
a
a
loading
loading
screen.
screen
If
if
the
the
request
request
fails,
fails
it
it
will
will
actually
actually
retry
retry
the
the
request
request
3
3
times,
times
and
and
if
if
it
it
still
still
fails
fails
at
at
that
that
point,
point
the
the
status
status
will
will
change
change
to
to
error.
error
Now
now
if
if
it
it
was
was
a
a
success,
success
we
we
can
can
render
render
out
out
the
the
data
data
in
in
the
the
UI,
ui
and
and
that's
that's
a
a
lot
lot
of
of
functionality
functionality
with
with
not
not
a
a
lot
lot
of
of
code.
code
But
but
you
you
might
might
be
be
wondering
wondering
what
what
this
this
key
key
is
is
all
all
about.
about
Well,
well
now
now
let's
let's
imagine
imagine
that
that
we
we
want
want
to
to
update
update
this
this
data
data
on
on
the
the
server.
server
To
to
handle
handle
that,
that
we
we
can
can
bring
bring
in
in
the
the
use
use
mutation
mutation
hook.
hook
When
when
data
data
is
is
written
written
to
to
the
the
server,
server
we
we
can
can
hook
hook
into
into
it
it
with
with
the
the
on
on
success
success
function
function
and
and
automatically
automatically
invalidate
invalidate
the
the
query
query
we
we
already
already
made
made
based
based
on
on
its
its
key.
key
This
this
tells
tells
React
react
you're
you're
ready
ready
to
to
invalidate
invalidate
and
and
refetch
refetch
the
the
original
original
request,
request
and
and
we
we
can
can
even
even
tap
tap
into
into
the
the
state
state
of
of
this
this
process
process
by
by
referencing
referencing
is
is
fetching
fetching
from
from
use
use
query
query
to
to
keep
keep
tabs
tabs
on
on
the
the
loading
loading
state.
state
Now
now
if
if
you
you
want
want
to
to
run
run
multiple
multiple
queries
queries
in
in
the
the
same
same
component,
component
you
you
can
can
easily
easily
do
do
that,
that
and
and
it
it
will
will
automatically
automatically
run
run
them
them
in
in
parallel
parallel
to
to
ensure
ensure
optimal
optimal
performance.
performance
But
but
sometimes
sometimes
one
one
query
query
might
might
depend
depend
on
on
data
data
from
from
another,
another
like
like
all
all
the
the
cars
cars
owned
owned
by
by
a
a
user.
user
That's
that's
also
also
made
made
easy
easy
with
with
the
the
enabled
enabled
option.
option
Like
like
I
i
said
said
before,
before
they've
they've
thought
thought
of
of
everything.
everything
This
this
has
has
been
been
React
react
Query
query
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
content
content
like
like
this,
this
enroll
enroll
in
in
my
my
full
full
React
react
course
course
on
on
Fireship
fireship
IO
io
that
that
breaks
breaks
down
down
a
a
ton
ton
of
of
React
react
concepts
concepts
in
in
100
100
seconds
seconds
or
or
less.
less
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains the benefits of React freight, including simplifying data fetching and handling complex requirements. They also discuss the use of the use mutation hook and the use of the React API to handle queries and updates. The speaker recommends enrolling in a React course to learn more about the concept of React and mentions a course on Fireship IO.
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 useEffect, 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 are data fetching code, but also handles these complex requirements out of the box. For example, you might want to re fetch data when the user leaves and then comes back to the same window. Fetch u on window focus 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 you 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 Dev Tools 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 3 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 you're ready 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 wanna 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.
The speaker explains the benefits of React freight, including simplifying data fetching and handling complex requirements. They also discuss the use of the use mutation hook and the use of the React API to handle queries and updates. The speaker recommends enrolling in a React course to learn more about the concept of React and mentions a course on Fireship IO.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : React Query in 100 Seconds 
        and a small summary : The speaker explains the benefits of React freight, including simplifying data fetching and handling complex requirements. They also discuss the use of the use mutation hook and the use of the React API to handle queries and updates. The speaker recommends enrolling in a React course to learn more about the concept of React and mentions a course on Fireship IO.
        [/INST]
        
        Generate the video : 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 useEffect, 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 are data fetching code, but also handles these complex requirements out of the box. For example, you might want to re fetch data when the user leaves and then comes back to the same window. Fetch u on window focus 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 you 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 Dev Tools 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 3 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 you're ready 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 wanna 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.
        