tqf/docs/comparison.mdx

React Query hooks for Firebase.

---
title: Comparing React Query Firebase
description: How does React Query Firebase differ from other solutions?
---

How is this library different from other solutions such as such as [ReactFire](https://github.com/FirebaseExtended/reactfire) or
[react-firebase-hooks](https://github.com/CSFrequency/react-firebase-hooks)?

The answer is simple - React Query Firebase doesn't try to implement the complex data fetching logic that other solutions provide,
instead it wraps around [React Query](https://react-query.tanstack.com/). Out of the box React Query handles caching, background updates
and stale data with zero configuration. It also provides tools such as DevTools, infinite-loading APIs, data pre-fetching, mutation tools and much more.

Alongside this, React Query Firebase is unopinionated when it comes to integrating with both Firebase and React Query. You can use the library alongside
your existing Firebase or React Query code with zero conflict. You provide the [Query Keys](https://react-query.tanstack.com/guides/query-keys) and a
Firebase instance and the library does the rest. Each hook allows you to also provide React Query hook options, which opens the door to making integration
with the rest of your application super powerful.

Since we've also got access to the awesome [`useMutation`](https://react-query.tanstack.com/reference/useMutation) hook, it means the library provides super useful
hooks to help reduce boilerplate code for many Firebase operations, for example:

```jsx
const signIn = useAuthSignInWithEmailAndPassword(auth, {
  onSuccess() {
    navigate('/account');
  },
  onError(error) {
    toast.error(error.message);
  },
});

return (
  <>
    <button
      disabled={signIn.isLoading}
      onClick={() => signIn.mutate({
        email: 'foo@bar.com',
        password: '123456',
      })}
    >
      Sign In
    </button>
    {signIn.isError && <p>{signIn.error.message}</p>}
  </p>
);
```

In this simple example, we've got success and error callback handlers alongside reactive updates within our application, with zero custom local
state management. By integrating with React Query, it allows us to build complex logic flows with minimal effort.