Best Practice for React

Akash Sheikh — Wed, 19 Jul 2023 19:58:25 +0000

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>
  )
}

React — StateFull and StateLess

Akash Sheikh — Tue, 11 Jul 2023 14:42:47 +0000

Stateful component:

A component that manages the state in class-based with state or functional with useState.
In some component, the data keeps changing, for example, watching the cricket score etc.
In most of the cases, the class-based components extend react component.
Stateful components can use react life cycle hooks
In stateful components it good to use the this instance

Stateless component:

A component that has no internal state management in it.
In some component, the data remains the same, for example, showing the static data.
Function components are simply functions that receive the props and return the JSX code.
Stateless components can not use the react life cycle hooks
Here need not to use this instance, they just receive the props as an argument

DEV Community: Akash Sheikh

Best Practice for React

1 — Avoid local state as much as possible

2 — Use Functional components instead of Class components

React — StateFull and StateLess