6 React libraries developers should check out

Originally posted in company blog

React isn’t a new tool, but it is one that constantly evolves, influencing web development in the process.

One of the libraries that has really impacted React development is Redux. It introduced functional programming ideas like immutability and pure functions.

This article introduces and summarizes some of the smaller, yet useful libraries that can change the way you develop with React, whether you use Redux or not. If you’ve been using React for a long time, these won’t be new to you. However, if you’re just getting started or looking for new techniques, these six libraries are helpful in solving everyday tasks.

Recompose

If you’ve started using stateless, functional components and higher-order components, this library is perfect for you. Until React fully optimizes functional components, Recompose provides a really useful method, pure(). It turns functional components into pure components, which means that it won’t be re-rendered if props are shallowly equal (as of React version 0.15, functional components are always re-rendered).

Some other useful methods are branch(), which allows rendering different components based on condition, or compose(), that helps with multiple HOC composition. With these tools, you can dive deep into a functional programming style and make your components really obscure. They also help make components simpler and easier to understand.

Object Rest Spread

While not a library, Object Rest Spread is a babel plugin for ES proposal. It’s currently in stage 3 and is not implemented natively, so it’s not fully safe to use, but many developers have already adopted it. If you read Redux-related tutorials, you’ll definitely see examples of Object Rest Spread in use. It allows you to easily write immutable JavaScript code without any additional library. It works like lodash:

_.merge({}, yourObject) or Object.assign({}, yourObject)

React works well when you make your state immutable. This allows you to optimize rendering. Redux even requires immutability, which in general is a good practice. One way to ensure immutability is to use Immutable.JS library. While Immutable.JS does contain powerful tools to manipulate immutable data structures, using it for simple operations feels unnatural and a bit awkward. Object Rest Spread, combined with an array spread operator, filter, and map operations, helps you write immutable code without using Immutable.JS.

Object Deep Freeze / Redux Immutable State Invariant

If you’re already familiar with immutability and know exactly what JavaScript function mutates object or array and which does not, it’s easier to keep the state immutable. Otherwise, you could mutate the state unknowingly and cause strange bugs to happen. Two libraries help with that: Object Deep Freeze works similarly to Object.freeze, but where Object.freeze only freezes the first level of an object, deep freeze—as its name suggests—does that deeply. One way of using Object Deep Freeze is to write tests for your state changes and deep freeze state before and see if the tests fail. If you are using Redux, the second library does something similar, only automatically. If the running application state is mutated, it will warn the developer.

Reselect

Reselect is another tool that works great with Redux. In the description, it even states, “Simple ‘selector’ library for Redux.” Even though it was designed to be used with Redux, it doesn’t have to be—it can be used anywhere. Reselect is a memoization library, which is useful if you have a lot of Flux state data manipulation in components. If you design your Flux stores on data structures, rather than application views, your different views might need a different data structure. For example, you might store a category tree in a flat list in store, but need a hierarchical structure for easier tree rendering. If you do this on each render, it will be expensive. Reselect allows you to memorize these operations and only do them once.

Enzyme

React is already friendly if you want to write unit tests. However, if your components become complex and renders have various third-party components, it’s hard to set up a testing environment to render your component deeply and then assert it. A much easier way is to use a shallow render and render only components under the test. React test utilities support this, and have helpers asserting results, but a much easier way is to also use Enzyme library, which layers React test utilities with easier API to check and assert results.

Classnames

If you’re tired of using multiple ternary operators in single statements, or concatenating different classes, the Classnames library is for you. Classnames helps with custom CSS classes based on multiple conditions. You simply create an object with Classname followed by condition result:

 classNames({
'btn-enabled': props.isEnabled,
})