4 libraries to use in your React app
React is a view library - the V in MVC. To be able to write a modern and complex React applications we need to include more libraries than only React.
But which ones should you use? In a quickly changing landscape, it is easy to miss out on essential libraries.
In this article, I list the 4 libraries you should know about and consider for your next React application.
When your React application grows, you will soon notice that you send many callbacks around for managing the state that is shared between React components. At this point, it can be a bit difficult to follow the flow of what is happening.
If you are in this situation then it’s time to look into a library for managing state. The most widely used one in React ecosystem is called Redux.
With Redux you have one store for the whole application state. Redux makes it easy and reliable for any component to access and update the state in the store.
GraphQL is used for fetching data to your components from a backend instead of using REST API calls.
Advantages compared to REST:
- You define in the front end exactly what kind of data to use for each component.
- Only the data needed for the components are sent over the network.
- You don’t need to write many API endpoints, you only have one
- It has powerful developer tools that helps you visualize the data.
- There is a learning curve.
- Not as widely used as REST by existing public and private APIs.
On the backend, you can create a GraphQL endpoint for your data with graphql.js together with a library for the web server you are using for example express-graphql. You can also use a SaaS for example graph.cool
Advantages with lodash compared to ES6:
- Better performance
- Consistent API. Compare lodash
- You can elegantly chain multiple calls which make the code more readable
- null safety on all calls. In ES6 you will get a runtime error if you do
undefined. This will not happen with lodash.
- Usable utility functions which ES6 lacks, for example,
- It’s another dependency in your project which adds to your bundle size
- It’s another new thing for you and your team mates to learn.
- Official docs
- Experiment with it! :)
Recompose has many features. I want to highlight these features:
- Access lifecycle methods in functional components
- Add state to functional components
- Compose HOCs.
With recompose, you can code your React application entirely with functional components.
Recompose is a library for advanced users. I recommend using it only if you are comfortable working with functional components and/or HOCs in your code base.