Reactjs | Perfect tools for the perfect use cases🛠️💥

#react #javascript #typescript #webdev

React is awesome & one of the most wanted & most used JavaScript frameworks according to StackOverflow survey 2021. With React simplest to complex applications can be done easily. But there are so many reactjs based libraries that we often find "finding libraries" an overwhelming task. Many times, we can't even remember/guess the term related to that library making it way harder to find. So I present you all the perfect tools for perfect the use cases of React

I'm not going into full detail here. Just a simple introduction to the libraries that I mentioned or not at all. You'll find their docs more useful than this post/article/blog

State Management

A major part of React is state management. But there are 2 types of state management done in frontend UI libraries:

UI state (e.g. UI schemes, light/dark mode, etc..)
Data fetching/Async-data state (e.g. request-response caching, WebSocket event caching, etc..)

Many people don't even know that these 2 types of state management exist. They just give one solution Redux/Mobx/XState etc. But these are only UI state managers. Though some of 'em (e.g Redux) has Data fetching support through other packages/middlewares (e.g rtk-query) or have started recently, still it isn't complete

Data fetching/Network response caching requires caching, invalidation of outdated data, memoization, garbage collection, etc.. which are extremely hard to do manually through a UI state manager. Doing this with UI state managers can often lead to memory leak/high resource usage & other issues

Client-side state managers:

zustand: A real simple, scalable, bearbones (barebone) state manager with no boilerplate but using the same FLUX principal. It's completely hooks-based & follows a single-store pattern. Though multiple stores can be created, all of them will be individual from each other. It's lightweight, fast, supports redux devtools, can be integrated with another awesome state-management pattern library immer & it supports middleware for stores. It's like the perfect state manager that React was missing
Redux: The God of state managers. Every UI framework including Dart's Flutter is even supported by it. The pioneer library to implement the FLUX pattern. Redux changed the way of state management. Its performant, configurable, production-ready & provides robust API. Always proved its worth while being in larger production applications. But its boilerplate is overwhelming. Even being so great & useful, many people still hate it because of its huge boilerplate. Though redux-toolkit tried to mitigate that problem. But once you get off the first phase (boilerplate), I can guarantee you'll never regret that you used Redux
MobX: Simple, scalable state manager & its framework agnostic. MobX even has Dart support. Its architectural freedom really lets one organize their state any way one wants. Just like Redux, it's battle-tested & production-proven. Its also store based & it mainly provides reactivity through Observables. Also, it's so much transparent & exposes the way it works to the end-user which is really uncommon compared to other libraries'
recoil: Experimental warning! This state manager is from Facebook. It creates a graph for state attached to the React's tree & state changes flow from roots of this graph (which they call atom) through pure functions known as selectors & into components. It's boilerplate-free, simple, lightweight, compatible with Concurrent React (when this feature in react will be available) & provides ease of usability. It closes the gap that React's Context API can't do
jotai: An awesome state-manager based on individual state pattern. Instead of creating a central store, it allows to create/manage state using individual atoms. And yeah, those states are called Atom. It's primitive, flexible, lightweight & super performant. It's from the same creator of zustand but with a different mental model. It's more close to recoil where zustand is close to Redux/MobX
XState: An unique state management solution that uses the Finite State machine's concept."A finite state machine is a mathematical model of computation that describes the behavior of a system that can be in only one state at any given time". At first glance, xstate can be confusing but it'd all make sense once you get there. It's a neat state manager

Data fetching/Async-data management libraries:

react-query: The missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing, and updating server state in your React applications a breeze. Before react-query synchronizing with server state & caching was a neck-breaking job. Especially when you get only UI state managers. It removes the pain of managing memory, memoization, caching & outdated data invalidating manually. It's available for react-native too. It's one of the reasons why many developers choose React over other frontend frameworks
swr: It's pretty similar to react-query. Provides hooks for data fetching & lightweight, supports JAM stack. Also transport & protocol agnostic. It provides fast page navigation, polling on intervals, data dependency, revalidation of cached data on focus, pagination/scroll position recovery & many more. It's from the same team of Nextjs & vercel
apollo-client: A comprehensive state management library that enables one to manage both local and remote data with GraphQL. Can be used to fetch, cache, and modify application data, all while automatically updating your UI. It's like react-query but for GraphQL. Shares the same hook names too. But it's cross-framework compatible thanks to its community. It's the best Data-fetching library specifically for GraphQL
rtk-query: It's from redux-toolkit & it's the best match if you're using Redux/redux-toolkit as your UI state manager. It's simple & lightweight. Unlike others, it's not store-based. So all requests are individual. As it is from Redux, you can expect production-grade performance too

Styling

Component styling is a very important part of any frontend project. The best way is of course with brae minimum CSS but time's most valuable so using some kind of framework or pre-built library is always a plus point

Styling using JavaScript is a new option too though it has an extra runtime cost but provides high customizability. Its called CSS in JS

Another way to keep the customizability freedom but cut off the runtime cost is to use CSS pre-processors. These're highly modular, customizable, offer easy-to-use syntax. And these finally get compiled to functioning CSS

CSS based:

tailwindcss: Highly modular/configurable, utility first CSS framework. Has its own jit(Just in time) compiler to cut off unused CSS & push CSS styles on the fly in development. In production, can cut off 100% of unused CSS using purgecss. Almost anything that can be done through CSS can be done using tailwindcss classes
bootstrap: Twitter's bootstrap is one of the best CSS component frameworks. For being over 10 years in the game, it's the most mature CSS framework. Best for quickly building user interfaces. Provides robust CSS classes that can be used to build any component. Bootstrap provides they're own component set. Also, there are tons of libraries built for bootstrap. So you'll never run out of custom component libraries
scss: scss/sass is a CSS pre-processor that allows doing all cool stuff with a fairly easy syntax. Previously Sass's compiler was written in Ruby but later it was re-written in Dart. Scss/Sass is also the main building block of bootstrap where previously bootstrap was completely CSS-based
css modules: Simply, CSS files in which all class names and animation names are scoped locally by default. It keeps the class names of that CSS file completely unique using UUID at the end of each class at build time. It's the best way to keep your component's styles individual from other's

CSS in JS based:

styled-components: One of the best CSS in JS library. It allows styling using JS's new tag template function syntax. Allows theming, supports style inheritance, editor's CSS IntelliSense support, cross-compatible with other CSS frameworks & allows passing/accessing props through style functions/arguments
emotion: Another CSS-in-JS library but its framework-agnostic. Offers high performance & ease of usability. It supports styling with both object & string. Emotion is really developer friendly & thus many bigger UI component libraries use it
xstyled: It's a utility-first CSS-in-JS framework built for React. It makes it easy to consistent design system and scale it over time. Unlike other CSS-in-JS libraries, it allows one to style via passing props. It matches React's declarative term perfectly. Provides theming support. It's like tailwindcss but made with CSS-in-JS. But it isn't a complete CSS-in-JS library. It requires either styled-component or @emotion/react @emotion/styled as it uses them under the hood
JSS: Another framework-agnostic CSS-in-JS library. It's simple, minimal & provides all the basic & barebones without any bloat & has a plugin system. It's a major choice for bigger UI component frameworks as it can do a lot if one can define it. Its also very lightweight

UI components

UI components are simply pre-built components that can be configured/tweaked for other design foundations. UI components save a lot of developer time & make the development easier. Also, its managed by so many people that they're often more secure & performant comparing to components built manually

So many UI component libraries are available. Many of them are completely individual & many are based on the philosophy & design pattern of bigger design systems

Here is the list:

chakra-ui: Modular component library. It's like the tailwindcss of React but made with style as props pattern. Highly configurable theming support. Can be configured to look like anything & has a huge component library
material-ui: The most famous UI component library in React ecosystem. Provides 200+ components, highly configurable & based on google's material-design principal. But currently, it's suffering from a Typescript type-related bug that makes the tsserver super slow to determine types. But it'll be fixed in the next major update v5 which is already in beta. This bug can slow down low-spec PCs easily but if you've got a mid-high spec PC then don't stop, use it. Also awesome if you're not using Typescript in your project
react-bootstrap: React implementation of famous CSS framework bootstrap
ant-design react: A UI component framework provided by ant-design for React based on the ant-design system. Highly customizable, supports theming & provides a huge number of components.
grommet: Responsive, mobile-first, carefully designed UI component library for react. Has a large number of components. And their design is just beautiful. Simple, minimal & highly responsive
evergreen: A flexible, contributor-friendly, sensible-default style providing UI component framework. Its foundation is super beautiful, provides a minimal design system & is unique among all

Info!: I'm building a UI component library based on tailwindcss which is gonna be a cross-framework library. At the start, react & vue support will be provided & svelte support is planned too. Its name is revind. And the project needs more contributors. If you want to contribute, head to https://github.com/revindjs/revind or contact me via Twitter

Form handlers

Handling Forms is a hard thing in react. Controlling, validating input, reset state on successful submit, checking whether the input was touched, etc.. are a lot of work to do. But luckily, there are form handling libraries that make it a breeze

List of form handlers:

GraphQL

The graph query language provides a way to fetch only required data saving both user's & server's bandwidth. A technology by Facebook that sits on top of HTTP to work. It only uses the HTTP POST verb to transfer data. It's modern & makes HTTP connections more eco-friendly

Popular graphql libraries for React are:

Apollo Client by Apollo Server
Relay by facebook
urql - universal react query library

Essential UI helper components/hook

1. Tables

Tables are most often needed for data-driven applications. But handling this amount of dynamic text manually can be a hazard. But these React Table libraries saves the day

List of table libraries:

material-table (best if using material-ui)
react-table (from the creator of react-query)
MUI-Datatables (another best match for material-ui)
react-virtualized (awesome for being framework-agnostic)

2. Animation libraries

Animations are now a modern trend. Every website/app has some kind of animations to make the end user's experience amazing. But creating such awesome animations isn't easy, it includes mathematics, algorithms & sometimes GPU acceleration too. But following react animation libraries made that work easy...

List of animation libraries:

3. Loaders/Skeleton/Progress-bar

Always need a fallback when data is being fetched from the server, right? Showing loaders/skeleton/progress-bar makes it easier for users to wait & gives your site fewer "go away at first click" scores

Below are awesome loader libraries that can be used with React:

4. Infinite Scroll

Pagination is becoming an older way. Because of the increasing amount of smartphone users, it's now more convenient to use infinite scroll to get more data or an infinite amount of data. But doing so involves a lot of DOM manipulation via refs thus doing it manually is kind of a hazard. So infinite scroll component/hook libraries exist

List of infinite scroll component/hook libraries:

Libreact

Another awesome react library is libreact. It's an awesome collection of all misc. react components that we don't need very often but sometimes become essential. libreact provides these components separately or as a collection. But either way, it almost contains all less essential components at the perfect time when we need 'em