ReactJS Best Practices: Building Scalable and Maintainable Applications (Part 1)

Essential Techniques for Optimizing Performance, Code Quality, and Maintainability in Your ReactJS Projects.

source: freepik.com

Introduction

What is best practice? best practice is a method or technique that is the most effective for solving a particular problem or condition. The purpose of best practice is to create simple and effective code that is also easy for other people to understand.

Berikut adalah beberapa contoh penggunaan best practice :

Architecture

// Organized Architecture
/src
├── /components
│   ├── /Button
│   │   ├── Button.js
│   │   └── Button.css
│   ├── /Header
│   │   ├── Header.js
│   │   └── Header.css
│   └── /Footer
│       ├── Footer.js
│       └── Footer.css
├── /pages
│   ├── Home.js
│   └── About.js
├── /hooks
│   └── useAuth.js
├── /contexts
│   └── AuthContext.js
└── index.js

// Unorganized Architecture
/src
├── Button.js
├── Button.css
├── Header.js
├── Header.css
├── Footer.js
├── Footer.css
├── Home.js
├── About.js
├── useAuth.js
├── AuthContext.js
└── index.js

Use organized architecture. An organized architecture will make the development process and navigation easier for you, this is especially important when working on a large and complex project, as it will help you easily locate the files you need to work on.

Boolean Props

// incorrect code
<MyComponent isActive={false} />

// correct code
<MyComponent />

In the code example above, <MyComponent /> does not need the isActive property in this situation. If you don’t include isActive property, it will have a default value offalse in <MyComponent />.

// incorrect code
<MyComponent isActive={true} />

// correct code
<MyComponent isActive />

In the code example above, you do not need to specify the value true of the isActive property. By writing <MyComponent isActive />, theisActive property will automatically considered true. However, remember that this concept only applies if the isActive property is a boolean. Other properties that are not boolean will not work in the same way.

Event Handlers

// functional component
// incorrect code
<button onClick={() => this.handleClick()} />

// correct code
<button onClick={this.handleClick} />


// class component
// incorrect code
<button onClick={() => handleClick()} />

// correct code
<button onClick={handleClick} />

In the code example above, you do not need to use an arrow function for the handleClick function. ThehandleClick function will only run when you click. However, if you use the arrow function the function handleClick will create a new function every time the component is rendered.

Fragment

// incorrect code
return(
    <div>
        <Header />
        <Main />
    </div>
)

// correct code
return(
    <>
        <Header />
        <Main />
    </>
)

In the code example above, you do not need to use adiv inside the React fragment. This will help keep the DOM structure clean and avoid unnecessary elements.

Ternary Operator

// incorrect code
{isLoggedIn ? <WelcomeMessage /> : <LoginPrompt />}

// correct code
{isLoggedIn && <WelcomeMessage />}

In the code example above, use && when you only need to show the element if a certain condition is met. This is very useful for rendering optional elements or parts of UI that only need to appear under certain conditions.

// incorrect code
{value ? value : "Default"}

// correct code
{value || "Default"}

In the code example above, use || when you want to provide a default value if the main value is empty or falsy (for example, null or undefined)

// incorrect code
{status === "success" ? (
    <SuccessMessage />
) : status === "error" ? (
    <ErrorMessage />
) : (
    <LoadingMessage />
)}

// correct code
{status === "success" && <SuccessMessage />}
{status === "error" && <ErrorMessage />}
{status !== "success" && status !== "error" && <LoadingMessage />}

In the code example above, you need to define conditions one by one. This approach simplifies and makes the code easier to read. The best practice mentioned is especially useful when you have many complex nested conditions.

Conclusion

Best practices are essential for efficiency. With the best practice, your code will be cleaner, more efficient, maintainable, and easier to read. This is especially important if a new programmer joins your project, as they won’t need to spend time deciphering the code or conditions because your code will be easier to understand.