Best Practice for React

React is one of the most popular techs when talking about JavaScript. Even for some developers, it’s the best. React doesn’t force you how to structure your project. It’s completely up to you to choose how do it. As a result, that makes some developers bring the artistic sense out of them. But, on the other hand… others can make a mess. When working as a team, it’s better to make an understandable structure and code.

In this article you’ll explore 18 tips about how to code better in React.

**

1 — Avoid local state as much as possible

**
In case you have some calculations, avoid putting the result in a local state and rendering that state later in the JSX. Instead, move your calculations in the JSX, or create a function that returns the result and put it in the JSX.

import React, { useEffect, useState } from 'react';

const App: React.FC = () => {
  // ❌ Avoid: Unnecessary state
  const [result, setResult] = useState();

  // Considering a and b are two values coming from some API.
  const { a, b } = apiCall();
  // ❌ Avoid: Unnecessary useEffect
  useEffect(() => {
    setResult(a + b);
  }, [a, b]);

  return (
    <div>
      {result}
    </div>
  );
}

export default App;

Do this

import React, { useEffect, useState } from 'react';

const App: React.FC = () => {

  // Considering a and b are two values coming from some API.
  const { a, b } = apiCall();
  // ✅ Good: You can move it into the JSX
  return (
    <div>
      {a + b}
    </div>
  );
}

export default App;

**

2 — Use Functional components instead of Class components

**
To understand the use of Functional components, we should first get to know the difference between Functional and Class component.

Function component is just a plain JavaScript function which accepts props and returns a React element. On the other hand, a Class component is a class that extends from React.Component and creates a Render function that returns a React element. Obviously, this requires more code to write. With React Hooks, now you can write your components as functions instead of classes.

One of the major reasons to drop Class components, in Function components there is no this binding. Besides, they are easy to read, test and maintain.

Class component

import React, { Component } from 'react';
// ❌ Avoid: Too much code
export default class LoadData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      usersData: [],
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((users) => {
        this.setState({
          data: users,
        });
      });
  }

  render() {
    return (
      <ul>
        { this.state.usersData.map(user => <li key={user.id}>{user.name}</li>) }
      </ul>
    )
  }
}

The same thing with Functional component

import React, { useEffect, useState } from 'react';
// ✅ Good: Less code
export const LoadData: React.FC = () => {

  const [usersData, setUsersData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((users) => {
        setUsersData(users);
      });
  }, []);

  return (
    <ul>
      {usersData.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  )
}