by jbardon⚡

The beginner’s collection of powerful tips and tricks for React

Picture by @neonbrand from Unsplash
This is part of my “React for beginners” series on introducing React, its core features and best practices to follow. More articles are coming!
<< Start over | < Previous

As you can tell from the title of this article, it’s aimed at beginners.

Actually, I started to learn React a few months ago. Reading the React documentation, open source projects, and Medium articles has helped me a lot.

Without a doubt, I’m not an expert in React. And so I read a lot about this topic. Also, building a small projects has helped me get to know React better. Along the way, I’ve adopted some best practices — and I want to share with you here. So let’s get started.

Name your components

To figure which component has a bug, it’s important to always give your component a name.

Even more so when you begin to use React Router or third party libraries.

There is a debate about whether to use a default or named import. Note that a default import doesn’t ensure that the component’s name is consistent in the project. Besides, tree-shaking will be less effective.

No matter how you expose your component, name it

You need to define the class name or the variable name (for functional components) that’s hosting the component.

React will actually infer the component name from it in error messages.

Here’s my last piece of advice about imports (taken from here): If you use ESLint, you should consider setting the following two rules:

Prefer functional components

If you have many components whose purpose is only to display data, take advantage of the many ways to define a React component:

Both snippets define the same Watch component. Yet, the second is way shorter and even drops this to access the props in the JSX template.

Replace divs with fragments

Every component must expose a unique root element as a template. To adhere to this rule, the common fix is to wrap the template in a div.

React 16 brings us a new feature called Fragments. Now you can replace those useless divs with React.Fragments.

The output template will be the fragment content without any wrapper.

Be careful while setting state

As soon as your React app is dynamic, you have to deal with components’ states.

Using states seems pretty straightforward. Initialize the state content in the constructor and then call setState to update the state.

For some reason, you may need to use the current state or props values when calling setState to set the next state’s value.

The issue is that React doesn’t ensure this.state and this.props have the value you’re expecting. setState is asynchronous, because state updates are batch to optimize DOM manipulations (see the details in the React docs and this issue).

To prevent corrupted states, you must use setState with the function parameter. It provides proper state and props values.

Binding component functions

There are many ways to bind an element’s events to its component, and some are not recommended.

The first and legitimate solution appears in the React documentation:

It might disappoint you when you find out that it doesn’t work.

The reason is that when using JSX, this value is not bound to the component instance. Here are three alternatives to make it work:

Using an arrow function in JSX as in the first example seems appealing at first. But don’t do it. In reality, your arrow function will be created again upon each component rendering and it’ll hurt performance.

Also, be careful about the last solution. It uses class fields syntax which is only a proposal for ECMAScript.

This means that you have to use Babel to transpile the code. If the syntax is not finally adopted, your code will break.

Adopt container pattern (even with Redux)

Last but not the least, the container design pattern. This allows you to follow the separation of concerns principle in the React component.

A single component handles template rendering and user actions in the same place. Let’s use two components instead:

Here is the trick. DatePickerContainer handles user interactions and API calls if necessary. Then it renders a DatePicker and supplies props.

Thanks to this pattern, the container component replaces the presentational component. This functional component becomes useless without props.

In addition, if you use Redux as the state manager for you app, it also plugs well with this pattern.

The connect function injects props into the component. In our case, it will feed the controller which will forward those props to the component.

Thus both components will be able to access to Redux data. Here is the full code for the container design pattern (without Redux or class fields syntax).

Bonus: Fix props drilling

While writing my learning project for React, I noticed a bad pattern that bothered me with props. On each page, I had a main component that used the store and rendered some nested dumb components.

How can deeply nested dumb components access the main component data ? Actually, they can’t — but you can fix it by:

  • wrapping the dumb component in a container (it becomes smart)
  • or pass down props from the top component

The second solution implies that components between the top component and the dumb component will have to pass down props they don’t need.

The React community has named this issue prop drilling.

Page is the main component that loads the user details. It is necessary to pass this data through UserDetails to take it to CustomInput.

In this example, the prop only passes through one component which doesn’t need it. But it can be far more if you have reusable components. For example, the Facebook codebase contains a few thousand reusable components!

Don’t worry, I’m going to teach you three ways to fix it. The two first methods appear in the Context API documentation : children prop and render prop.

These solutions are pretty similar. I prefer using children, because it works well within the render method. Note that you can also extend those patterns by providing deeper nested components.

The third example uses the experimental context API.

I don’t recommend this method, because it’s using an experimental feature. (And this is why the API recently changed on a minor version.) Also, it forces you to create a global variable to store the context, and your component gets an unclear new dependency (the context can contain anything).

That’s it!

Thanks for reading. I hope you learned some interesting tips about React!

If you found this article useful, please click on the ? button a few times to make others find the article and to show your support! ?

Don’t forget to follow me to get notified of my upcoming articles ?

This is part of my “React for beginners” series on introducing React, its core features and best practices to follow.
<< Start over | < Previous

➥ JavaScript

➥ Tips & tricks