Sam Lee

React Query

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.

Why do I use ReactQuery

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}/> }

Example

{ 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

What is NextUI

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.

Why do I use NextUI

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.

Example

Loading Button

Disabled Button

Animated Input

Multiple Select

Side Projects

Hey there! I wanted to share some thoughts about my experience with side projects.

I've been working on apps for both web and mobile. For web, I use Next.js, and for mobile, I use React Native. The JavaScript world is pretty cool to work with, I gotta say.

But you know what? Instead of talking about tech stuff, I want to focus on planning. I've realized UI is really important. As a full-stack dev, I often change code here and there. Backend changes, then frontend changes, then backend again... it can get tiring.

So I've been thinking: why not spend a bit more time on designing and finalizing the UI first? It might save us from all that back-and-forth later.

Just a thought I wanted to share. What do you think? Have you had similar experiences?