Best Practices in ReactJS

Thursday, 23/03/2023

Tram Ho

Import by structure

components
images
stylesheets
hooks
utility

<span class="token keyword">import</span> <span class="token punctuation">{</span> Routes<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createSlice <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@reduxjs/toolkit"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@headlessui/react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"./Home"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> logo <span class="token keyword">from</span> <span class="token string">"./logo.svg"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">"./App.css"</span><span class="token punctuation">;</span>

import { Routes, Route } from "react-router-dom";

import { createSlice } from "@reduxjs/toolkit";

import { Menu } from "@headlessui/react";

import Home from "./Home";

import logo from "./logo.svg";

import "./App.css";

Comply with naming conventions

PascalCase is mainly for components
camelCase is mainly set for functions, hooks, variables, arrays

 <span class="token keyword">const</span> <span class="token punctuation">[</span>firstName<span class="token punctuation">,</span> setFirstName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Ihechikara"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token keyword">const</span> studentList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
 <span class="token keyword">const</span> studentObject <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
 <span class="token keyword">const</span> <span class="token function-variable function">getStudent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

const [firstName, setFirstName] = useState("Ihechikara");

const studentList = [];

const studentObject = {};

const getStudent = () => {}

State grouping

Instead of

  <span class="token keyword">const</span> <span class="token punctuation">[</span>username<span class="token punctuation">,</span> setusername<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>password<span class="token punctuation">,</span> setpassword<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>

const [username, setusername] = useState('')

const [password, setpassword] = useState('')

Should use

  <span class="token keyword">const</span> <span class="token punctuation">[</span>user<span class="token punctuation">,</span> setuser<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

const [user, setuser] = useState({})

Destructor props

<span class="token keyword">const</span> <span class="token punctuation">[</span>user<span class="token punctuation">,</span> setuser<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

Clarifying variables

  <span class="token comment">// Declare them as capitalized named constants.</span>
  <span class="token keyword">const</span> <span class="token constant">MILLISECONDS_PER_HOUR</span> <span class="token operator">=</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span> <span class="token comment">// 36000000</span>
  
  <span class="token function">setTimeout</span><span class="token punctuation">(</span>restart<span class="token punctuation">,</span> <span class="token constant">MILLISECONDS_PER_HOUR</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// Declare them as capitalized named constants.

const MILLISECONDS_PER_HOUR = 60 * 60 * 1000; // 36000000

setTimeout(restart, MILLISECONDS_PER_HOUR);

Don’t repeat variable names unnecessarily

<span class="token comment">// old</span>
type User <span class="token operator">=</span> <span class="token punctuation">{</span>
  userName<span class="token operator">:</span> string<span class="token punctuation">;</span>
  userLastName<span class="token operator">:</span> string<span class="token punctuation">;</span>
  userAge<span class="token operator">:</span> number<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">print</span><span class="token punctuation">(</span><span class="token parameter">user<span class="token operator">:</span> User</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>userName<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>userLastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> (</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>userAge<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//new</span>
type User <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> string<span class="token punctuation">;</span>
  lastName<span class="token operator">:</span> string<span class="token punctuation">;</span>
  age<span class="token operator">:</span> number<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">print</span><span class="token punctuation">(</span><span class="token parameter">user<span class="token operator">:</span> User</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> (</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// old

type User = {

userName: string;

userLastName: string;

userAge: number;

}

function print(user: User): void {

console.log(`${user.userName} ${user.userLastName} (${user.userAge})`);

}

//new

type User = {

lastName: string;

age: number;

}

console.log(`${user.name} ${user.lastName} (${user.age})`);

}

Create param object when there are 2 or more params

<span class="token comment">//old </span>
type UserStatus <span class="token operator">=</span> <span class="token string">'online'</span> <span class="token operator">|</span> <span class="token string">'offline'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">createUser</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token operator">:</span> string<span class="token punctuation">,</span> lastName<span class="token operator">:</span> string<span class="token punctuation">,</span> age<span class="token operator">:</span> number<span class="token punctuation">,</span> status<span class="token operator">:</span> UserStatus</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token function">createUser</span><span class="token punctuation">(</span><span class="token string">'Gapur'</span><span class="token punctuation">,</span> <span class="token string">'Kassym'</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token string">'online'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//new</span>
type UserStatus <span class="token operator">=</span> <span class="token string">'online'</span> <span class="token operator">|</span> <span class="token string">'offline'</span><span class="token punctuation">;</span>
type User <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> string<span class="token punctuation">,</span> lastName<span class="token operator">:</span> string<span class="token punctuation">,</span> age<span class="token operator">:</span> number<span class="token punctuation">,</span> status<span class="token operator">:</span> UserStatus <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">createUser</span><span class="token punctuation">(</span><span class="token parameter">user<span class="token operator">:</span> User</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token function">createUser</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Gapur'</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">'Kassym'</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">29</span><span class="token punctuation">,</span>
  status<span class="token operator">:</span> <span class="token string">'online'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

//old

type UserStatus = 'online' | 'offline';

function createUser(name: string, lastName: string, age: number, status: UserStatus) {

// ...

}

createUser('Gapur', 'Kassym', 29, 'online');

//new

type User = { name: string, lastName: string, age: number, status: UserStatus };

// ...

}

createUser({

lastName: 'Kassym',

age: 29,

status: 'online'

});

Component consistency

<span class="token comment">// old</span>
<span class="token keyword">const</span> <span class="token function-variable function">renderHeader</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">User:</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">{</span>user<span class="token punctuation">.</span>name <span class="token operator">&amp;&amp;</span> user<span class="token punctuation">.</span>lastName <span class="token operator">&amp;&amp;</span> <span class="token function">renderUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">renderUserInfo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//new</span>
<span class="token keyword">const</span> <span class="token function-variable function">renderHeader</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">User:</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">{</span><span class="token function">renderUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">renderUserInfo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">.</span>name <span class="token operator">&amp;&amp;</span> user<span class="token punctuation">.</span>lastName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

// old

const renderHeader = () => {

return (

<div>

{user.name && user.lastName && renderUserInfo()}

</div>

);

}

const renderUserInfo = () => {

return <span>{`${user.name} ${user.lastName}`}</span>;

};

//new

return (

<div>

{renderUserInfo()}

</div>

);

}

if (user.name && user.lastName) {

}

return null;

};

Create variable to set default value

<span class="token comment">//old</span>
<span class="token keyword">function</span> <span class="token function">createUser</span><span class="token punctuation">(</span><span class="token parameter">user<span class="token operator">:</span> User</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  user<span class="token punctuation">.</span>name <span class="token operator">=</span> user<span class="token punctuation">.</span>name <span class="token operator">||</span> <span class="token string">'User'</span><span class="token punctuation">;</span>
  user<span class="token punctuation">.</span>lastName <span class="token operator">=</span> user<span class="token punctuation">.</span>lastName <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span>
  user<span class="token punctuation">.</span>age <span class="token operator">=</span> user<span class="token punctuation">.</span>age <span class="token operator">||</span> <span class="token number">18</span><span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">//new</span>
<span class="token keyword">function</span> <span class="token function">createUser</span><span class="token punctuation">(</span><span class="token parameter">user<span class="token operator">:</span> User</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> userWithDefaultValues <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'User'</span><span class="token punctuation">,</span>
    lastName<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>user<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

//old

user.name = user.name || 'User';

user.lastName = user.lastName || '';

user.age = user.age || 18;

// ...

}

//new

const userWithDefaultValues = {

lastName: '',

age: 18,

...user,

};

// ...

}

Share the news now

Source : Viblo

Best Practices in ReactJS

Import by structure

Comply with naming conventions

State grouping

Destructor props

Clarifying variables

Don’t repeat variable names unnecessarily

Create param object when there are 2 or more params

Component consistency

Create variable to set default value

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers