Perfect libraries for the perfect use cases

1. 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 (ex: toggle light/dark mode)
• Data fetching (Ex: request-response caching, WebSocket event caching)

Data fetching/XHR caching requires caching, invalidation of old 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.

My picks from each of them are

UI state management

Redux
A predictable State Container for JS Apps? Its the king of state managers. The pioneer library to implement the FLUX pattern. 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.
Alternatives: zustand and MobX

Data fetching

• react-query: The missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronising, and updating server state in your React applications a breeze.
• swr: It's very similar to react-query. SWR provides hooks for data fetching and its lightweight. Alternatives: apollo-client - Best for GraphQL

2. Styling

Component styling is a core part of all frontend projects. Styling using JavaScript is a new option (CSS in JS) but it has an extra runtime cost but its extremely customisable.

Another way to keep the customisability freedom but cut off the runtime cost is to use CSS pre-processors. These are highly modular, customisable, offer easy-to-use syntax. And it will finally get compiled to functioning plain CSS.

My Top picks are

• tailwindcss - CSS Based.
  Its a 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 with tailwindcss classes.

• styled-components - CSS in JS based.
  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.

3. Forms and validation

Handling Forms can be very challenging in react. Controlling, validating input, reset state on successful submit, checking whether the input was touched (and the list goes on..) are hell lot of work natively. But luckily, there are form handling libraries that make it a breeze.

formik is my pick.

4. UI Components

UI components are simply pre-built components that can be configured/tweaked for all our needs. Its one of the core component of every design systems. It saves a lot of developer time, effort and make the development easier. Also, its managed by so many people that they're often more secure & performant comparing to components built manually.

Top picks are

• material-ui: The most famous UI component library in React ecosystem (Not just in React).
• react-bootstrap: React implementation of famous CSS framework bootstrap