Tools to build lightweight React Apps

TLDR;

• @rafty/ui - Rafty UI for UI components
• zustand - Zustand for managing states
• tailwindcss - TailwindCSS for styling your components
• dndkit - DNDKit for working with DND stuff
• lodash - Lodash for utility functions

React is a great tool for building applications, thanks to its extensive ecosystem and welcoming community. You can create both simple and complex applications easily with React, whether you choose to use frameworks like Next.js and Remix or not. However, these applications can quickly become quite large if you haven’t planned ahead. This is where tools like:

• Chakra, MUI for UI,
• Redux, React Context for state management,
• and many others come into play.

These libraries are undoubtedly valuable and can alleviate many development challenges, but incorporating them into your app can significantly increase its size. You might wonder why this is a problem, so let’s first explore that.

The Problem

We can summarize the problem in 4 key points -

1. Big bundle size - This means your app requires more bandwidth and time to render on the client, even if you employ code splitting or frameworks to separate the code into pages. Your overall build size remains substantial.

2. Time to compile - Larger bundles necessitate more time for compilation, and Hot Module Reload (HMR) will also take more time to reflect changes in the app, leading to a less favorable Developer Experience (DX).

3. Slow Apps - In a production environment, your app will perform slowly when delivering changes to clients. This slowness can also affect your development experience.

4. Device Support - Since your application demands a significant amount of memory and processing power to render all components, it might not work well on lightweight laptops or older machines.

It’s essential to keep in mind that these issues primarily arise when building large-scale applications involving elements such as graphs, drag-and-drop functionality, data streams, multiple API requests, and other complex processing tasks. For your portfolio website, though, it should work just fine 😁.

These problems can significantly impact the app you’re building, and unfortunately, you can’t entirely solve them, as the issue lies not in your code but in the libraries themselves.

The Solution

The solution is quite simple, migrate to these libs -

• @rafty/ui - Rafty UI for UI components
• zustand - Zustand for managing states
• tailwindcss - TailwindCSS for styling your components
• dndkit - DNDKit for working with DND stuff
• lodash - Lodash for utility functions

These are my favorite libs to build applications in 2023, and there might be more. If you know any, tell us about it down in the comments.