6 super useful libraries for React and React Native

I have been working with React and React Native for more than 4 years now and today I am going to share with you some great libraries that I find myself using again and again in my projects. Here they are:

Reselect

Reselect is a simple “selector” library for Redux allowing you to create memoized selectors, from their description:

Selectors can compute derived data, allowing Redux to store the minimal possible state.
Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
Selectors are composable. They can be used as input to other selectors.

Apisauce

Apisauce is basically a wrapper over Axios, it adds standardized errors and request/response transforms to the API response. It also allows you to add monitors that you can use to record values, measure performance of API calls, perform logging, etc.

I personally use monitors for printing API responses to console in development and log/monitor our API failures.

It also allows you to add request transforms, which you can use to add user language in the headers of each API call for example.

Immer

Immer makes it easy to write reducers and makes it easy to work with immutable state, from their documentation:

Using Immer is like having a personal assistant; he takes a letter (the current state) and gives you a copy (draft) to jot changes onto. Once you are done, the assistant will take your draft and produce the real immutable, final letter for you (the next state).

Before Immer:


const byId = (state, action) => {
     switch (action.type) {
         case RECEIVE_PRODUCTS:
             return {
                 …state,
                 …action.products.reduce((obj, product) => {
                     obj[product.id] = product
                     return obj
                 }, {})
             }
         default:
             return state
     }
 }

After Immer your code simply becomes:


import produce from "immer"

const byId = produce((draft, action) => {
     switch (action.type) {
         case RECEIVE_PRODUCTS:
             action.products.forEach(product => {
                 draft[product.id] = product
             })
     }
 })

No more spread operator hell!

react-i18next

react-i18next is, in my opinion, the best i18n library for React, which is a React wrapper for i18n, you can use it with both React and React Native, and it’s very powerful, it has everything you would need for having a multi-language app including functionalities like plurals, formatting, interpolation.

Redux persist

Redux persist basically allows you to save i.e persist your redux state to the device local storage so you can make sure the user retains their logged-in state and data between sessions.

While you could implement your own solution, Redux persist just handles a bunch of things out of the box, it warns you if the older data on the device doesn’t match with your new state after an upgrade, gives you helpers to migrate state if you have made massive changes to your state in a version upgrade, it allows you to select what to persist, how to merge the old state from the device and your application, what storage engine to use i.e async storage in react native and local storage in react js, etc. its really powerful.

React Hook Form

React Hook Form is the best form library for ReactJS, it helps you handle form validation among other things and it is really fast! it’s easy to use, works with both React JS and React Native and has a form builder that makes it easy to generate forms. It comes with really good documentation as well.

Styled Components

styled-components is my go-to library for handling styles in my react apps, I enjoy working with it because it allows me to write actual CSS in JS including things like media queries, do nesting, and a lot more things, it’s awesome and really powerful, and also works with React Native.

Are there any libraries that you like to use in your projects often, please comment below!

Saad Ibrahim