React: Best Practices

Best practices to follow while building your react application

What is React?

React is a javascript library for creating an amazing user interface. React is maintained by Facebook. It allows us to create reusable UI components and to build a single page application.

Why we should follow best practices?

Finding best practices is simply taking time to research what we are planning to do and finding the best way to do it. Establishing best practices is an important part of making everything work smoothly and efficiently. Best practices can keep evolving as new and better solutions are found.

Best practices are for success and for the minimization of failure.

Best practices in React:

1. File Organization:

File organization is the best practice for all kinds of applications. For react applications, create-react-app gives the organized file structure. For keeping it organized always, we can keep all the top-level CSS and image files as well as font files in assets folder and helper files in the helper folder if required. We can keep all the components in the components folder for more ease. If we have a more complex component, then we can have a folder of that component itself. There is no best way of how to keep the files into the folders as it can vary from developer to developer.

2. Small Components:

While creating a react application, we should divide the complete UI into small components. If we break the UI into the small components, we can reuse them. Also, they are easy to read, maintain as well as easy to test. Creating functional components are more efficient for simple and small interface components. As compared to the Class component, the functional component includes less code and is stateless. As it has less code thereby easy to understand and test.

3. Reusable Components:

While creating react components, we should take into consideration that we are making components as small and independent as possible, so that we can reuse them again whenever and wherever possible.

4. Don’t Repeat Yourself:

As we discussed in the point above, we should always write a component in such a format that we can reuse it instead of repeating the same code. It will help in keeping the code small and error-free.

5. Using Pascal Case for Names:

While working on the react application, we should name the created component in the upper camel case format, which is also known as Pascal Case. It means the words are written without spaces and the first letter of each word is capitalized. By writing component names in the Pascal case format, it will help in differentiating the default JSX elements tags from the ones you have created.

// One way
noteList.js or note_list.js
// Correct way
NoteList.js

6. Lint your code:

Linting is for keeping the code clean and readable. Eslint helps to keep code nice and clean. Prettier is also a code formatting tool, which has a set of rules for code formatting and indentations.

7. Test your code:

Testing is important for ensuring that the code behaves as expected. For testing, you can use Enzyme, Jest or any testing tools. Test-driven Development(TDD) is one approach where you can write tests before writing the code. It is for reducing the number of bugs by assuring that the code will work properly.

8. Remove unnecessary div’s:

While rendering reacts components, most of the time people keep the components inside a <div> tag, which sometimes leads to incorrect HTML.

Example:

// NotsList.js component
return (
    <div className="notes-list">
        <ul>
        {
            notes.map((note) => (
                <Note myNote={note} />
            )) 
        }</ul>
    </div>
)
// Note.js component
return (
    <div>
        <li>
            <h3>{myNote.name}</h3>
            <p>{myNote.description}</p>
        </li>
    </div>
)

For the above example, the DOM structure will be:

<div>
    <ul>
        <div>
            <li>...</li>
        </div>
        <div>
            <li>...</li>
        </div>
    </ul>
</div>

This is an incorrect way, as inside <ul> there should be <li> not <div>. Instead of the <div>, we can use <React.Fragment> tag or we can keep it <>.

return (
    <div className="notes-list">
        <ul>
        {
            notes.map((note) => (
                <Note myNote={note} />
            )) 
        }</ul>
    </div>
)
// Note.js component
return (
    <React.Fragment>
        <li>
            <h3>{myNote.name}</h3>
            <p>{myNote.description}</p>
        </li>
    </React.Fragment>
)

This example will result in the DOM structure as:

<div>
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

9. Avoid using an index as keys:

While working with an array in react application, we use the key property in the map function. The key property is used in react to keep track of each element in an array. Some people use an index as a unique key for an element, but that is not an ideal case. Probably we should use a proper unique key from the data that we are going to map.

// One way
notes.map((note, index) => (
    <div key={index}>
        <h3>{note.name}</h3>
    </div>
    )
)
// correct way
notes.map((note) => (
    <div key={note.id}>
        <h3>{note.name}</h3>
    </div>
    )
)

10. Necessary comments only:

In the application, we should use comments only when necessary. Comments are usually written when the code is difficult to read or not written properly.

11. Update state in a correct:

In the react application, for updating the state we should use ‘setState’ instead of directly changing the state.

Example:

// Incorrect way
const { counter } = this.state;
// Correct way
this.setState((prevState, props) => {
    return {
        counter: ++counter
    }
})

The state is an async operation, so with the second way, we can easily update the state object.

12. Make use of prop-types:

The prop-types library is for checking types of props and it will help in preventing bugs by ensuring that you are using the correct type of props.

13. Use Visual testing tools:

Many visual testing tools are available to develop isolated and reusable UI components. Storybook is an open-source tool for developing UI components in isolation. You can check here for more information about Storybook.

14. Use React Developers Tools:

Chrome and Firefox has an extension of React Developer Tools. We can see the components hierarchy in that. If we click on any component, we can view the props and state of that component.

Following the best practices will help in improving the performance and the quality of the applications.

Enjoy Coding 🎉