Best Practices in React Development

Photo by Lautaro Andreani on Unsplash

1.    Folder Structure

Component-centric file structure should be used which implies that all the files related to a different component (like test, CSS, JavaScript, assets, etc.) should be kept under a single folder.

For ex:

Components

  |

  --Login

    |

    --tests--

    --Login.test.js

    --Login.jsx

    --Login.scss

    --LoginAPI.js

 

2.    HOC

It’s an advanced technique in React which allows reusing component logic inside the render method. An advanced level of the component can be used to transform a component into a higher order of the component. For example, we might need to show some components when the user is logged in. To check this, you need to add the same code with each component. Here comes the use of the Higher-Order Component where the logic to check the user is logged in and keep your code under one app component. While the other components are wrapped inside this.

 

3.    Decompose Big Component

Try to decompose large components into small components such that component performs one function as much as possible. It becomes easier to manage, test, reuse and create a new small components.

4.    Use Functional or Class Components based on Requirement

If you need to show User Interface without performing any logic or state change, use functional components in place of class components as functional components are more efficient in this case.

Try to minimize logic in React lifecycle methods like:

componentDidMount();

componentDidUpdate();

These cannot be used with functional components, but can be used with Class components.

While using functional components, you lose control over the render process. It means with a small change in component, the functional component always re-renders.

 

5.    Naming and Destructuring Props

Use meaningful and short names for props of the component. Also, use props destructuring feature of function which discards the need to write props with each property name and can be used as it is.

6.    Use propTypes for Type Check

It is a good practice to do type checking for props passed to a component which can help in preventing bugs. Please refer below code for how to use

 

7.    Naming Conventions

Use PascalCase in components, interfaces, or type aliases. 

Use camelCase for JavaScript data types like variables, arrays, objects, functions

8.    Avoid Unnecessary DIV tags

BAD:

GOOD:

9.    Remove Unnecessary Comments

Add comments only where it’s required so that you do not get confused while changing code at a later time.

Also don’t forget to remove statements like Console.log, debugger, unused commented code.

 

10.The Rule of Max 3 props inline

When there are three or fewer properties, then you should keep those properties in their line inside both the component and the render function.

Less than 3 props:

More than 3 props:

 

11.Use shorthand for Boolean props

BAD:<RegistrationForm hasPadding={true} withError={true} />

GOOD:<RegistrationForm hasPadding withError />

 

12.Avoid curly braces for string props

BAD:<Paragraph variant={"h5"} heading={"A new book"} />

GOOD:<Paragraph variant="h5" heading="A new book" /> 

13.Write a fragment when a DIV is not needed

 

14.Integrate self-closing tags when no children are needed

BAD: <NavigationBar></NavigationBar>

GOOD: <NavigationBar />

 

15.Apply ES6 Spread Function

Using ES6 methods to send an object attribute would be a more straightforward and effective method. All of the object’s props will be automatically inserted if the phrase “…props” is used between the open and close tags.

 

16.Using Map Function for Dynamic Rendering

 

17.Use ES6 Spread Operator

18.Use Ternary Operators

BAD:     

GOOD:

19.Use Object Literals

BAD:

GOOD:

 

20.Don't Define a Function Inside Render

BAD:

GOOD:

 

21.Use Memo

BAD:

Although the child component should render only once because the value of count has nothing  to do with the ChildComponent . But, it renders each time you click on the button.

GOOD:

Now, no matter how many times you click on the button, it will render only when necessary.

22.CSS in JavaScript

BAD:

GOOD:

23.Use Object Destructuring

BAD:

GOOD:

24.Avoid using string concatenation.

BAD: const userDetails = user.name + "'s profession is" + user.proffession

GOOD: const userDetails = `${user.name}'s profession is ${user.proffession}`

 

25.Import in Order

BAD:

GOOD:

The rule of thumb is to keep the import order like this:

• Built-in
• External
• Internal

 

26.Use Implicit return

BAD:

GOOD:

27.Quotes

BAD:

GOOD:

Use double quotes for JSX attributes and single quotes for all other JS.