React Best Practices and Useful Functions

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)

Where this:

Turns into this:

Use Webpack

If you are planing on building a large scale applcation I recommend reading this article to understand how lazy loading works.

Use JSX

Always look at your bundle size

Do this:

import Foo from ‘foo/Foo’

instead of:

Import {Foo} from ‘foo’

Keep your components small (Very Small)

What needs to have its own component?

What is the structure behind it. You have a form that contains two inputs a button and a link. Lets see this in code:

Whats wrong here? Repetition. The inputs contain the same structure, why not make that a component.

Now that is beautiful. I will not get into much detail here but if you want to continue reading go to Thinking React.

What about State?

Use ShouldComponentUpdate for performance optimization

If you want to read more on performance optimization read my article on React Perf

Think about inmutability

What just happened? Object2 was created as a reference of object1 that means that in every sense of the word object2 is another way of referencing object1. When I created object3 I created a new object that has the same structure as object1. The Object.assign function takes a new object and then clones the structure of object1 therefore creating a new reference so when you compare object1 to object3 they are different. Why is this significant? Think of performance optimization, I mentioned above that React renders everytime the state of a component changes. When using the ShouldComponentUpdate function instead of doing a deep check to see if all the attributes are different you can simply compare the objects. If you want to know more keep reading this article.

Use Smart and Dumb Components

Dumb components are also easier to debug because it enforces the top down methodology that React is all about.

Use PropTypes

Always bind the functions in the constructor method

someFunction = () => {}

Use Redux/Flux

Keep in mind that sometimes it is very useful to use Redux/Flux but you might not need to keep the entire state of your application in one plain object. Read more about it here.

Use normalizr

File structure

First structure:

Second structure:

Use Containers (Depracated — 2017 Update Next Chapter)

The reason you want to use containers that pass down the data is because you want to avoid having to connect every view to a store when dealing with Flux/Redux. The best way to do this is to create two containers. One containing all secure views (views that need authentication) and one containing all insecure views. The best way to create a parent container is to clone the children and pass down the desired props.

Example:

Use Templates instead of Containers

Avoid Refs

Use Prop validation

Other comments

Use a router: There is no much to say here other than if you want to create a single page app you need a router. I personally use React Router.

If you are using flux remember to unbind the store listening to change events. You don’t want to create memory leaks.

If you want to change the title of your application dynamically you can do something like this:

This repo is a great example of React/Redux authentication.

Whats new in 2017

Useful helper functions

Create reducer dynamically

Usage:

Create constants:

Render if:

Usage: render component if somethingTrue

Change state value dynamically:

My webpack.config.js

Keep reading about React High Performance Applications here.

If you liked this article, please click that green 👏below so others can enjoy it. Also please ask questions or leave notes with any useful practices or useful functions you know.