This is a third party library of fetching or updating data in a holistic way, the 2 most used feature by me is useQuery hook and useMutation hook.
React Query is a powerful library that I rely on for data fetching in my projects. One of the main reasons I use React Query is because of its convenient custom hook called useQuery. This hook provides me with essential parameters such as isLoading, refetch, and data, which greatly simplify my UI handling. For example I can display a spinner if isLoading is True such as{ isLoading && <Spinner/> } or{ data && <InvoicesTable data={data}/> }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{ isLoading, refetch, data } =
useQuery([ "retrieveInvoices", page],
async () => {
const route = "/api/invoices";
const data = await axios.get(route);
return data as any;
},
{
onSuccess: (data) => {
if (data) {
setInvoices(data)
} else {
setInvoices([])
}
},
}
);NextUI is a powerful UI library for React that combines the flexibility of TailwindCSS with the accessibility features of React Aria. It provides a wide range of complete components, including both logic and styles, allowing you to easily build accessible and customizable user interfaces. By leveraging TailwindCSS, you have access to its extensive class utility system, resulting in optimized compiled CSS size.
One of the standout features of NextUI is its pre-styled animations, which greatly enhance the user interface. I have personally utilized NextUI in building this website as well as other Next.js projects. However, it is worth noting that the size of library is relatively large, which can be a potential downside.
Loading Button
Disabled Button
Animated Input
Multiple Select