Trong bài báo này, Mohammad Faisal sẽ giới thiệu tới các độc giả 21 Best Practice hướng tới một dự án React code sạch. Hãy cùng thu thập tri thức và nâng cao chất lượng code lên nào.

Photo by Diana Polekhina on Unsplash.

Lời nói đầu

React không hề áp đặt bạn phải cấu trúc mọi thứ như thế nào. Bởi vậy chính chúng ta là những người phải chịu trách nhiệm với project của mình, đảm bảo sao cho nó được 'sạch' và tiện maintain sau này.

Bữa nay ta sẽ cùng nhau nói về các Thực Hành Hay Nhất mà dân chuyên nên áp dụng để nâng cao sức khỏe cho app React của mình. Những rule này được mọi người chấp nhận rộng rãi, nên không lẽ gì chúng ta lại không tiếp cận đến những tri thức này.

Mọi thứ sẽ được thể hiện qua code, mời các bạn lên chuyến bay này và thắt dây an toàn vào nào!

1. Dùng dạng viết tắt của JSX

Dùng dạng viết tắt của JSX để truyền biến boolean. Ví dụ, nếu bạn muốn kiểm soát việc hiển thị title của Navbar component:

Xấu

return (
    <Navbar showTitle={true} />
);

shorthand-bad.jsx

Tốt

return(
    <Navbar showTitle />
)

shorthand-good.jsx

2. Dùng phép toán ba ngôi

Ví dụ, nếu bạn muốn hiển thị chi tiết user nào đó dựa trên role:

Xấu

const { role } = user;
if(role === ADMIN) {
    return <AdminUser />
}else{
    return <NormalUser />
}

ternary-bad.jsx

Tốt

const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />

ternary-good.jsx

3. Tận dụng lợi thế của cú pháp Object literal

Cú pháp tạo object sử dụng cặp dấu ngoặc {} thực sự giúp code của bạn dễ đọc. Ví dụ, bạn muốn hiển thị 3 loại user tương ứng với role. Lúc ấy bạn không thể dùng phép toán ba ngôi được vì có nhiều hơn hai lựa chọn.

Xấu

const {role} = user
switch(role){
    case ADMIN:
        return <AdminUser />
    case EMPLOYEE:
        return <EmployeeUser />
    case USER:
        return <NormalUser />
}

conditional-rendering-bad.jsx

Tốt

const {role} = user
const components = {
    ADMIN: AdminUser,
    EMPLOYEE: EmployeeUser,
    USER: NormalUser
};

const Component = components[role];
return <Componenent />;

conditional-rendering-good.jsx

Đã dễ xem hơn rồi đấy.

4. Dùng fragment

Hãy luôn chọn Fragment thay vì div. Không chỉ giữ cho code sạch mà còn tốt cho performance bởi vì có ít hơn 1 node được tạo ở DOM ảo.

Xấu

return (
    <div>
        <Component1 />
        <Component2 />
        <Component3 />
    </div>
)

fragment-bad.jsx

Tốt

return (
    <>
        <Component1 />
        <Component2 />
        <Component3 />
    </>
)

fragment-good.jsx

5. Đừng định nghĩa hàm ở bên trong render

Đừng định nghĩa hàm ở bên trong render. Cố gắng kiềm chế logic bên trong render sao cho ít nhất có thể.

Xấu

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE
        This is a bad example
    </button>
)

function-render-bad.jsx

Tốt

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
    <button onClick={submitData}>
        This is a good example
    </button>
)

function-render-good.js

6. Dùng memo

React.PureComponent và memo giúp performance của app bạn tăng một cách đáng kể. Và còn có thể tránh được rendering không cần thiết.

Xấu

import React, { useState } from "react";

export const TestMemo = () => {
    const [userName, setUserName] = useState("faisal");
    const [count, setCount] = useState(0);
    const increment = () => setCount((count) => count + 1);
    return (
        <>
            <ChildrenComponent userName={userName} />
            <button onClick={increment}> Increment </button>
        </>
    );
};

const ChildrenComponent =({ userName }) => {
    console.log("rendered", userName);
    return <div> {userName} </div>;
};

memo-bad.jsx

Value của count không liên quan tới ChildComponent, cho nên chỉ cần render childcomponent một lần duy nhất thôi. Nhưng mỗi lần bạn click vào button thì nó đều được render.

Tốt

Edit ChildrenComponent như sau nào ~

import React ,{useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})

memo-good.jsx

Giờ thì bạn có click đến bể nút, nó cũng sẽ chỉ render khi nào cần thiết thôi.

7. Đưa CSS vào JavaScript

Việc sắp xếp CSS còn vất hơn nhiều sắp xếp JS. Do vậy, khi viết app React, hãy tránh việc dùng JavaScript raw nhé.

Xấu

// CSS FILE
.body {
    height: 10px;
}

//JSX
return <div className='body'>
</div>

css-bad.jsx

Tốt

const bodyStyle = {
    height: "10px"
}
return <div style={bodyStyle}>
</div>

css-good.jsx

8. Tận dụng Object Destructuring

Tận dụng Object Destructuring! Ví dụ, nếu bạn cần hiển thị chi tiết user:

Xấu

return (
    <>
        <div> {user.name} </div>
        <div> {user.age} </div>
        <div> {user.profession} </div>
    </>
)

descrutcure-bad.jsx

Tốt

const { name, age, profession } = user;

return (
    <>
        <div> {name} </div>
        <div> {age} </div>
        <div> {profession} </div>
    </>
)

descructuring-good.jsx

9. Không cần {} cho thuộc tính chuỗi ký tự

Ví dụ, khi bạn truyền chuỗi ký tự vào childcomponent:

Xấu

return(
    <Navbar title={"My Special App"} />
)

string-props.-bad.jsx

Tốt

return(
    <Navbar title="My Special App" />
)

string-prop-good.jsx

10. Xóa code JS khỏi JSX

Bỏ hết JS code khỏi JSX nếu như nó không phục vụ cho mục đích render hay chức năng UI nào.

Xấu

return (
    <ul>
        {posts.map((post) => (
            <li onClick={event => {
                console.log(event.target, 'clicked!'); // <- THIS IS BAD
                }} key={post.id}>{post.title}
            </li>
        ))}
    </ul>
);

js-in-jsx-bad.jsx

Tốt

const onClickHandler = (event) => {
    console.log(event.target, 'clicked!');
}
return (
    <ul>
        {posts.map((post) => (
            <li onClick={onClickHandler} key={post.id}> {post.title} </li>
        ))}
    </ul>
);

jsx-in-js-good.jsx

Hẹn gặp lại ở phần 2!