45 NPM Packages to Solve 16 React Problems
React is simply great. It’s popular and performant. But an important aspect of React is that it doesn’t come with all the solutions.
That’s why we need to search for additional libraries, which can be both good and bad. If you are a beginner, you must spend considerable time searching for the best solution to a problem.
Today, we will have a comparative discussion to learn more about the alternative solutions to different problems in react.
1. Global State Management
Sharing state between components is mandatory in 99% of the applications. And there are some good solutions — both native and external.
If you ask me for one solution, I will say Redux. Not because it’s the best but because it’s the most practical one. Many companies already use it and you will have to use it at some point.
Also, the ecosystem is great as well. You can find a solution to almost any problem. Some great libraries that go with redux are:
redux-thunk -> For handling asynchronous action.
redux-persist -> For storing data locally (offline support).
reselect -> For making faster queries to store.
context -> Built in to React. Good for simple use. Not good for performance. Especially if you have huge changing data.
mobx -> Follows observer pattern. Good for reactive programming. Shouldn’t be used in any new project.
2. Server State Management
If your application heavily relies on some external data source, then managing that data (caching, pre-fetching, etc) can be crucial for performance.
I am personally a huge fan of
react-query and there are many others like me. It just works like magic.
caching stale data, and many more things out of the box. It’s simple, powerful, and configurable!
There is another player in the game named SWR. This is a similar library to React Query.
The main benefit of this library is that it is built by Vercel. They are the same people who created NextJS. So you can expect better performance when using NextJS.
Creating a React app from scratch is complex. Setting up Webpack, Bable, etc can be daunting!
NextJS is the choice for me when creating a React application from scratch. It is called the full-stack React framework.
In the documentation, it says,
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
The most important feature of this is its out-of-the-box SEO support. Which is great! You can do SEO in React as well. But it’s not straightforward like Next.
If you are starting with React or building some basic project, then you have other options.
create-react-app -> Building a single-page application. Good for beginners.
gatsby -> Building static content-oriented website. Not good for other use-cases.
4. Form Handling
90% of the web applications have some kind of form. And handling form inputs are a great pain. But we have some good news!
React hook form is the latest and greatest (according to me :P ) library for form handling. It’s really performant and flexible.
It has some good support with some external design libraries like
ant-design as well.
There are some good alternatives for this field.
Formik -> Formik comes with battle-tested solutions for input validation, formatting, masking, arrays, and error handling.
redux-form-> Don’t use it. It can really hurt the performance.
5. HTTP Call
In the modern world, almost all websites rely on some external data source. So making HTTP calls are very trivial.
Fetch is the recommended way to make HTTP calls.
It has limited but powerful features. It can support 95% of your workload.
Axios is an improvement over fetch. It’s very popular.
It has some nice features like built-in XSRF protection and automatic JSON conversion and the ability to intercept HTTP calls. If you need that, you should go for it.
You are going to need styling. There is no doubt about that. There are multiple ways to style your application.
Many may not agree with me. But I think styled-components are the best choice when it comes to styling in React applications.
It helps to create clean components with a clear separation of concerns. Also, it’s easily manageable and configurable through props.
However, as I said, there are other great alternatives!
plain old css -> Supported out-of-the-box. Should be fine for smaller projects.
sass -> An improvement over CSS. It provides nice features for managing CSS. good for mid-sized or even larger projects.
styled-jsx -> A library with a lot of similar features like
styled-components. Has some extra features here and there.
7. UI Library
In many cases designing all the components by hand may not be a good idea. In those cases using some kind of UI library might be a good idea.
The most versatile and configurable UI library for me is the Material UI.
It’s very popular and used by many companies. It's highly configurable which is why it’s so powerful.
There are some good alternatives to check out as well.
semantic-ui -> Many built-in components.
ant-design -> Less configurable. Limited but nice components.
chakra-ui -> Recently gaining popularity.
Good documentation can save 100s of hours in the future. So be proactive and adopt a documentation library very early in the project.
The recommended way to create documentation is React StyleGuidist.
There are some other alternatives too.
react-docz -> Very easy to use documentation guide. Worth a shot.
9. Multi-Language Support
If you are building a product on a global, scale then you would probably like to add multiple language support in your React application.
React i18next is the de-facto option for implementing multi-language support in React applications.
There are some other good alternatives as well.
This also has support for other libraries like VueJS and Angular as well.
Animations bring your application to life. There are some good options to use animation in React.
Plain CSS is the best way to animate a React application. It’s simple and fast. Also, this is more performant.
If you want something that is ready-to-use then here are some recommendations for you
framer-motion -> Production-ready animation
react-awesome-reveal -> This is used for simple animations to reveal a component
react-spring -> Another great and ready-to-use library.
11. Long List Render
Rendering a long list can hurt the performance of an application really badly. Using a library in this scenario can be a good idea.
If you have some kind of infinite-scrolling application then you should consider React Window
If you don’t need an infinite scrolling list then you can just paginate the data
12. Code Quality Tool
Linters can find any error in your code statically. It’s a good idea to use some kind of linter.
The go-to solution is Eslint
Having consistent visual styling is very important for any application and code-formatter can do that job for you!
This is the greatest solution for you. You don’t need anything else!
Data is the future. Most businesses today are data-driven. So having a good analytics tool for your application is very very important!
The most popular and powerful tool for the job is React Ga.
I don’t think you will need anything else.
I don’t need to reiterate how important testing is for any application. So here you go.
The recommended way to go is React Testing Library
It is very easy to use and designed to follow real-life use.
16. Building sharable components
If you are in a large team then sharing components easily can become a great concern!
Storybook is the way to go if you are looking for the most complete solution.
That’s it. I think now you have a pretty good understanding of which library to choose when. Let me know if you have any different opinions.
Have something to say? Get in touch with me via LinkedIn