Best practices for React

I have been working with react for a few years at Pipefy, and I have picked up on some best practices from my co-workers. In this text I would like to share some small details that have helped me write a cleaner and more maintainable code.

Tl;dr:

In this article you will find from best practices and some tips for React, to how to organize a React Class and a few React Tools.

Stateless and Functions

In reducing the complexity, it’s always important to have these in mind when creating new components:

• Start with the simplest
• Develop a single stateless function

const Username = ({ username }) => <p> The logged user is: {username} </p>

A React component can simply be a function as long as there’s nothing interfering in its lifecycle. In other words, basically when the React component is not using any of the following functions:

• constructor()
• render()
• setState()
• componentDidCatch()
• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()
• shouldComponentUpdate()

Organize the functions in a React Class

Adopting a pattern for sorting your functions in a React class is also going to help you browse large files, which in turn, allows you to anticipate where each function will be placed.

You can choose the most comfortable pattern for you. The one I like the most is:

1. Constructor
2. React lifecycle methods
3. The others components method
4. Render

export default class SampleComponent extends React.Component<Props, State> {

  // 1. Constructor
  constructor(props) {
  }

  // React life cycle methods
  componentDidCatch(){
  }
  
  // The others components methods
  isAdmin(user){
  }

  // Render
  render() {
    return (
      <div>
        { // Just JSX tags prevent create new functions on render }
      </div>
    );
  }
}

Even being a simple habit adopting new work standards, we must always remain disciplined even more so if there are several developers in the project when these standards must be continuously documented and respected.

A Single component per file

This makes it easier when looking for the component in the text editor, especially whenever two file may have the same name as the component.

Use parentheses in render method when there are two or more rows.

We sometimes try to simplify a code so much that can we create situations where we can easily fall into a trap. When we are using JSX tags inside javascript, it can leave the code aesthetically confusing, and this is very common in the react render method.

You can work around this by using parentheses to define different contexts.

// Bad
render() {
  return <Welcome className="class">
    <child />
  </Welcome>;
}

// Good
render() {
  return (
    <Welcome className="class">
      <child />
    </Welcome>
  );
}

// This is good too
render() {
  const child = <child />;
  return <Welcome className="class">{child}</Welcome>;
}

Keep your project updated

It is very dull to keep dependencies updated in a javascript project, but when we use the right tools, this becomes trivial. Try to use the Yarn with the command:

yarn upgrade-interactive

Use keys in lists

Every time you use a list, don’t forget the keys. They help improve your component’s rendering performance. You can find more about that in the React Docs!

const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

Know and Understand the Tools Available

The high popularity of React is related to its ecosystem having many tools that help the developer to increase productivity.

Here is a list of indispensable tools:

• ES6 + ES7 + ES8
• EsLint
• Prettier
• Jest + Coverage
• Flowjs
• React Dev Tools
• Redux Dev Tools

React StrictMode

Using the StrictMode is a safe way to prevent problems in a React project, as it increases the warnings in the javascript console, notifying you about:

• Side effects
• Components that use unsafe lifecycles
• Legacy and deprecated API

Knowing about these warnings helps you prepare your application for new React versions.

import React from 'react';

const ExampleApplication = () => (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
    <Footer />
  </div>
);

---

Adopting these little tips is up to you, none of them are mandatory, but I sincerely believe they can help you write better code.

Do you have any other tips to share with us?

😉

Did you like these tips? If you want to learn more about React, please don’t miss this article.

By the way, we are hiring…

Thanks for reading, if you want to be part of Pipefy, join our team. We want to meet you.

Written by Lúcio Charallo originally on PipeBlog – Oct 23, 2018