Khi bạn làm một project lớn thì việc viết “code sạch” là một điều rất quan trọng, giúp những người vào sau có thể hiểu được và tiếp tục maintain dự án. Bài viết dưới đây sẽ chia sẻ một số tip để viết code React clean code hơn nhé.

1. Cẩn thận trong khi làm việc với state

• Lưu ý rằng setState là bất đồng bộ, vì vậy khi chúng ta cần cẩn thận khi sử dụng state hiện tại để set một new state.
• Một ví dụ điển hình về cái này là khi bạn muốn tăng một giá trị trong state.
• Cách sai:

   this.setState({ value: this.state.value + 1 });

• Cách đúng sẽ là:

   this.setState(prevState => ({ value: prevState.value + 1 }));

2. Khi làm việc với String props

• Một giá trị string props có thể sử dụng trong nháy ngoặc kép mà không sử dụng dấu ngoặc nhọn ({}) hoặc dấu gạch ngược (`)

• Cách sai:

   const Greeting = ({ personName }) => <p>Hello, {personName}!</p>
    export const StringPropValuesBad = () => (
        <div>
            <Greeting personName={"Jack"} />
            <Greeting personName={"John"} />
            <Greeting personName={"Jame"} />
        </div>
    )

• Cách đúng sẽ là:

   const Greeting = ({ personName }) => <p>Hello, {personName}!</p>
    export const StringPropValuesBad = () => (
        <div>
            <Greeting personName="Jack" />
            <Greeting personName="John" />
            <Greeting personName="Jame" />
        </div>
    )

3.Object destructuring

• Trong ví dụ này , componentWillReceiveProps được truyền vào mộtt newProp và nhiệm vụ của chúng ta sẽ set state.active cho new active prop.
• Cách chưa tốt:

   componentWillReceiveProps() {
        this.setState({
            active: newProps.active
        });
    }    

• Nên viết:

   componentWillReceiveProps() {
        this.setState({ active );
    }   

4. Câu điều kiện

• Chúng ta thường viết câu điều kiện hoặc biểu thức điều kiện để hiển thị một số thứ liên quan đến điều kiện, và sẽ khó khăn hơn nếu chúng ta có nhiều component và điều kiện.
• Cách chưa tốt:

 let link;
    if (isLoggedIn) {
      link = <LogoutLink />
    }
    return <div>{link}</div>

• Nên viết:

{isLoggedIn && }

5 . Sử dụng một Fragment nhỏ trên Fragment lớn

• Cách chưa tốt:

   const App = () => (
    )

• Nên viết:

   const App = () => (
         <>
         </>
    )

6. Sử dụng toán tử 3 ngôi

• Cách này rất hữu dụng để show các trạng thái khác nhau hoặc các component khác nhau phụ thuộc vào điều kiện.
• Cách chưa tốt:

   let link;

    if(isLoggedIn) {
        link =
    } else {
        link =
    }
    return
{link}

• Nên viết:

        {isLoggedIn ? : }

7. Check array or empty

• Khi kiểm tra có phải là array không hay nó là rỗng.
• Cách chưa tốt:

   function findMax1(numberList) {
        if (!numberList || !numberList.length)
            return undefined;
            // nếu không tìm giá trị lớn nhất và return            
    }   

• Nên viết:

  function findMax2(numberList) {
        if (!Array.isArray(numberList) || numberList.length === 0)
            return undefined;
            // nếu không tìm giá trị lớn nhất và return            
    }      

• Bởi vì cách đầu tiên sẽ sai nếu có property là length hoặc sai nếu truyền string vào.

8. Thứ tự sắp xếp import

• Mình thường sắp xếp thứ tự import theo thứ tự ưu tiên như sau để dễ nhìn hơn:

1. React import.
2. Library import (theo thứ tự alpha).
3. Absolute import từ project (theo thứ tự alpha)
4. Relative import (theo thứ tự alpha).
5. import * as
6. import ‘./.’.

• Ví dụ:

   import React from 'react'
    import { useSelector } from 'react-redux'
    import styled from 'styled-components'
    import FrogsGalley from './FrogsGalley'
    import FrogsTable from './FrogsTable'
    import Stations from './Stations'
    import * as errorHelpers from '../utils/errorHelpers'
    import * as utils from '../utils/'