React-Query with Zustand

What is React Query?

React Query is a library for managing remote and asynchronous data fetching. It provides a simple and declarative API for making requests to APIs, caching the results, and handling errors.

What is Zustand?

Zustand is a small, fast, and flexible state management library. It is based on the functional programming concept of immutable state, which makes it easy to reason about and test your code.

import React, { useState } from "react";
import { useQuery } from "react-query";
import { create } from "zustand";

const useStore = create((set) => ({
  heading: 'Welcome', // client side state
}));

const App = () => {
  const heading = useStore((state) => state.heading)
  
  // server side state
  const { isLoading, error, data } = useQuery("users", async () => { 
    const response = await fetch("/api/users");
    const users = await response.json();
    return users;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <div>Error: {error.message}</div>;
  } else {
    return (
      <>
        <h1>{heading}</h1>
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </>
    );
  }
};

export default App;

Conclusion

React Query and Zustand are two powerful libraries that can be used together to manage state and fetch data in React applications. By combining the strengths of both libraries, you can build applications that are both efficient and easy to maintain.

I hope this explanation was helpful. Please let me know if you have any other questions.