If you are starting out with React, the sheer number of libraries that are used alongside it can be overwhelming. In this post, I will try to provide a short summary of them so that you can orient yourself better. I won't be able to list every single library here but I hope that knowing the landscape will help you know what is out there.
(This post was also translated into Korean)
A quick note before we dive in
Consider whether you really need a library before adopting it. While a library can save you time initially, it can cost you time in the future as you need to work around its bugs and limitations.
To keep things organized, I will group the libraries by their purpose.
This section contains the libraries that are used to implement the behavior of an app.
The simplest way to use state in React is with the useState hook. This state is only accessible within the component in which the hook is declared and as an app grows, you will need to share state between multiple components. While you could share state with only React hooks by either "lifting the state up" or storing the state in context, these approaches can be problematic. After lifting the state up, you need to pass the value through multiple layers of components if you need its value in a grandchild component. React context is not intended to be used for state management and used without care, will cause most of the app to re-render. This is where state management libraries come in, to manage state that needs to be shared between multiple components.
State management with the Flux pattern
The oldest and most common way to manage state in React is to store the entire state in a single "store" and feed it to components while updating it with separate actions. This is the flux pattern that Facebook introduced as a early guideline for managing state in React and the most popular state management library Redux uses this pattern. Due to how early versions of Redux required setting up several files, it developed a reputation in the community for being "heavy" or "full of boilerplate". But with the release of Redux toolkit, the amount of configuration required was reduced with the utilities it provided. Zustand has become more popular with the community lately because it implements the flux pattern with a few custom hooks.
Proxy state management
An early alternative to the flux pattern was proxy state management where state was stored in a JS proxy that can detect when it was changed and re-render the React components that are tied to it. Unlike store based state management which has immutable state, the state managed by proxy state management libraries are mutable. MobX is the most known state management library that follows this pattern and Valtio is simpler take on it based with a few hooks.
Atomic state management
Data fetching, that is downloading data from a server, is one of the most common tasks in a Frontend App. The basic way to do this is with the built in Fetch API but many prefer using something like Axios to avoid the Fetch's API awkwardness. However, as the app grows it needs to download more data, handle more loading and error states and do things like refetching, caching and optimistic changes to improve user experience. This is really tricky to implement on your own which is where data fetching libraries can help.
TanStack Query (previously known as React Query) and SWR both provide React hooks to fetch data and handle refetching and caching. If you are using Redux, RTK query is addon for doing data fetching with it.
All of the previous libraries are intended to be used with REST APIs. A common issue with REST APIs is that they have a fixed data structure which can't be changed without modifying the backend code. GraphQL aims to solve that problem by allowing the frontend to choose the exact data it wants. Apollo Client is the most common implementation of GraphQL used with React and provides a lot of data fetching features out of the box.
Utility function libraries
Client side routing
React router is the de-facto library for client side routing in React and it tackles parsing URLs and manipulating the browser history so that you can simply specify URLs and the components that must be shown for them.
Most web apps are multi-tenant and work with multiple users at the same time. To achieve this, each user must prove their identity and usually, this is done with passwords or social logins where the user's identity is proven by another party. This is authentication and implementing it requires a common set of functionality such as creating users, signing in/out and resetting passwords. Services like auth0's universal login provide a lot of this functionality for you that can be easily integrated into a React app with their SDK Another option is SuperTokens which is open source and can be self hosted.
React re-renders all child components by default when state is changed. This means that in the case of a form with several controlled inputs, a change to a single input will cause the entire form to re-render. Libraries like React Hook Form help avoid this pitfall and provide a simpler interface for doing input validation. Another alternative is React Final Form, the successor to Redux form which is one of the earliest form helpers for React.
Validation is where user input is checked before it is accepted into a system to reduce the risk of incorrect / malicious data from entering it. Validating several inputs within a nested data structure can lead to convoluted code. This is where schema validation libraries such as yup and zod can help. They let you declare the validation rules declaratively which is much easier to understand than custom validation functions.
There are thousands of languages and many different time, date, number and currency formats used across the world. Internationalization (frequently abbreviated as i18n) is the process of making an application capable of using different languages and formats. This involves changing the text and the data formats used in an app based on user settings. While you could implement this yourself, libraries like react-i18next and FormatJS provide ready-made code and established conventions for doing internationalization.
This section contains the libraries that help with the styling of an app. Since styling on the web is done with CSS, the following libraries provide easier ways to work with CSS.
CSS in JS
We often want our React components to have a different style based on the state that it is in. Doing this with only React involves changing the style prop or changing classes. While libraries like classnames or the smaller clsx make it easier to work with class name strings, it is still tedious to keep the class names in sync across JS and CSS. This is where CSS in JS libraries come in, allowing you to declare CSS alongside your components in JS which can be easily changed based on state or props with interpolation. emotion and styled components are the most used CSS in JS libraries.
Usually we write CSS from scratch, starting with an empty file and adding more rules as we go along. But often we need to create components that have a similar visual appearance. In this case, you can duplicate the CSS rules into a new selector, reuse the existing CSS selector or create a new generic CSS selector that can be applied to all components that need the same appearance. Adam Wathan argues that neither option is good and proposes using a combination of pre-defined styles that can be mixed and matched to achieve the desired appearance. Tailwind CSS implements this approach.
This section contains entire React components that can be added to your project so that you don't have to implement their behavior or styling on your own.
Sometimes called UI libraries, these packages provide a collection of commonly used pieces of UI as components. Libraries like MUI, Ant Design, Chakra UI and Mantine are pre-styled, with each following a common design aesthetic so that all the components look like they belong together. Radix UI provides components with no styling so that you can implement your own.
Listing all the individual React component packages here will be impossible. So I will list a few that tackle some common concerns.
The native way for dealing with files on the web is to use the file
input elements or file drag and drop with the File API. Implementing common UX for file upload on the web, especially around uploading images, can be cumbersome with these low level APIs. Enter filepond and uppy which provide components for working with file uploads.
Drag and Drop (DnD)
When it comes to working with files or re-organizing a list of items, drag and drop is a much better user experience. Plain HTML drag and drop involves marking elements as draggable and listening to the drag events to handle what should happen with the dragged element. Libraries like React DnD and dnd kit provide pre-made components and conventions to handle most drag and drop use cases without having to write your own code for it.
Doing animation on the web usually involves CSS transitions or CSS animations. Handling this in React can be tedious as each element's animation state has to be maintained and appended as inline styles or classnames. This is what libraries like react-spring and Framer Motion try to address by exposing components where animation can be defined in a more straightforward way. They also attempt to make the animations feel more natural with built in animation easing.
In addition, entrance and especially exit animations when a component mounts or unmounts in React is also tricky to implement which is why React transition group exists to simply it.