React Best Practices and Useful Functions

Nessim Btesh
8 min readAug 17, 2016

Update 2022, Read the following version:

Lately React has been becoming the new tool used by developers to create everything from a single page application to mobile applications. But since I started going deeper into React I have seen all this “cool” node modules that are extremely badly developed. They follow no rules, the components are way too big. They use state for pretty much everything, and they don’t leverage dumb components. Anyone with enough experience understands how much of a hassle this is to maintain and how much load it takes on the browser if you render every component every time. In this article I will walk you through React best practices, both on how to setup React and how to make it extremely fast.

Please note I will keep updating this article as new practices emerge.

Before you start reading please note React is a functional programming (FP) library. If you don’t know what FP is, please read this Stack Exchange response.

Use ES6 (transpiled with Babel)

ES6 will make your life a lot easier. It makes JS look and feel more modern. One great example with ES6 are Generators and Promises. Remember when there was a time that you had to do a bunch of nested calls to be able to do an asynchronous call. Well now I am glad to welcome you too Synchronous Asynchronous JS, (yea it’s as cool as it sounds). One great example of this are generators:

Where this:

Turns into this:

Use Webpack

The decision to use Webpack is simple: Hot reloading, minified files, node modules :), and you can split your…