React - Best Practices
Tags: react, webdev, javascript, beginners
Published: 2022-11-16 13:14:05

While working on a React App, following these coding conventions will give you a better development experience

## VS Code is Highly Recommended as IDE

Visual Studio Code has several features that a React developer loves. It gives a lot of useful extensions to make the development environment better. For React, here are some useful extensions which will assist you during development

- Prettier
- ES Lint
- JavaScript (ES6) code snippets
- Reactjs code snippets
- Auto import

## Use ES6 Syntax

Clean code is always appreciated. In JavaScript, you can adopt ES6 syntax to make your code cleaner.

### Write Arrow Functions

```jsx
// ES5
function getSum(a, b) {
  return a + b;
}

// ES6
const getSum = (a, b) => a + b;
```

### Use Template Literal

```jsx
// ES5
var name = "Bilal";
console.log("My name is " + name);

// ES6
const name = "Bilal";
console.log(`My name is ${name}`);
```

### Use <em>const</em> & <em>let</em>

They have block scope. Variables with `const` declaration can't be changed but with `let`, they are mutable

```jsx
// ES5
var fruits = ["apple", "banana"];

// ES6
let fruits = ["apple", "banana"];
fruits.push("mango");

const workingHours = 8;
```

### Object Destructuring

```jsx
var person = {
  name: "John",
  age: 40,
};

// ES5
var name = person.name;
var age = person.age;

// ES6
const { name, age } = person;
```

### Defining Objects

```jsx
var name = "John";
var age = 40;
var designations = "Full Stack Developer";
var workingHours = 8;

// ES5
var person = {
  name: name,
  age: age,
  designation: designation,
  workingHours: workingHours,
};

// ES6
const person = { name, age, designation, workingHours };
```

You will experience many features and flexibility in ES6 syntax

## Don't Forget <em>key</em> Prop With <em>map</em> in JSX

Always assign a unique value to the `key` prop to every JSX element while mapping from an array. Read [official docs](https://reactjs.org/docs/lists-and-keys.html#keys) for better understanding

```jsx
const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}];

// in return function of component
<ul>
  {students.map(({id, name}) => (
    <li key={id}>{name}</li>
  ))}
</ul>;
```

## Component Name Should be in <em>PascalCase</em>

```jsx
const helloText = () => <div>Hello</div>; // wrong

const HelloText = () => <div>Hello</div>; // correct
```

## Variable & Function Names Should be in <em>camelCase</em>

```jsx
const working_hours = 10; // bad approach

const workingHours = 10; // good approach

const get_sum = (a, b) => a + b; // bad approach

const getSum = (a, b) => a + b; // good approach
```

## ID & Class Names Should be in <em>kebab-case</em>

```html
<!--bad approach-->
<div className="hello_word" id="hello_world">Hello World</div>

<!--good approach -->
<div className="hello-word" id="hello-world">Hello World</div>
```

## Always Check <em>null</em> & <em>undefined</em> for Objects & Arrays

Neglecting `null` and `undefined` in the case of objects & arrays can lead to errors.

So, always check for them in your code

```jsx
const person = {
  name: "Haris",
  city: "Lahore",
};
console.log("Age", person.age); // error
console.log("Age", person.age ? person.age : 20); // correct
console.log("Age", person.age ?? 20); //correct

const oddNumbers = undefined;
console.log(oddNumbers.length); // error
console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct
console.log(oddNumbers.length ?? "Array is undefined"); // correct
```

## Avoid Inline Styling

Inline styling makes your JSX code messy. It is good to use classes & ids for styling in a separate `.css` file

```jsx
const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach

const text = <div className="learning-text">Happy Learing!</div>; // good approach
```

in `.css` file:

```css
.learning-text {
  font-weight: bold;
}
```

## Avoid DOM Manipulation

Try to use React state instead of DOM manipulation as

Bad approach

```html
<div id="error-msg">Please enter a valid value</div>
```

```jsx
document.getElementById("error-msg").visibility = visible;
```

Good approach

```jsx
const [isValid, setIsValid] = useState(false);

<div hidden={isValid}>Please enter a valid value</div>;
```

Set `isValid` false or true where you have logic of validating a value

## Always Remove Every Event Listener in <em>useEffect</em>

Don't forget to write cleanup function in `useEffect` to remove event listener you added before

```jsx
const printHello = () => console.log("HELLO");
useEffect(() => {
  document.addEventListener("click", printHello);
  return () => document.removeEventListener("click", printHello);
});
```

## Avoid Repetition, Use Generic Components

It is the best thing to make your code cleaner. Write a generic component for similar group of elements and render them on the basis of `props`
passed to it

```jsx
const Input=(props)=>{
  const [inputValue, setInputValue]=useState('');
  return(
    <label>{props.thing}</label>
    <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
  )
}
```

In other component you can use `Input` component as

```jsx
<div>
  <Input thing="First Name" />
  <Input thing="Second Name" />
</div>
```

## Don’t Throw Your Files Randomly

Keep the related files in the same folder instead of making files in a single folder.

For example, if you want to create a navbar in React then you should create a folder and place `.js` & `.css` files related to the navbar in it

## Functional Components Are Recommended

If you want to render some elements and don't need to use state then use functional components instead of class components because functional components are easy to use.

Moreover, if you have an idea of **React Hooks**, then with functional components you can easily play with the state too.

## Create a Habit of Writing Helper Functions

Sometimes you need a utility at more than one time across your React App.

To deal with this scenario efficiently, Write a helper function in a separated file named `helper-functions.js`, import wherever you want to use it and call that function in it.

## Use Ternary Operator Instead of <em>if/else if</em> Statements

Using `if/else if` statements makes your code bulky. Instead try to use ternary operator where possible to make code simpler & cleaner

```jsx
// Bad approach
if (name === "Ali") {
  return 1;
} else if (name === "Bilal") {
  return 2;
} else {
  return 3;
}

// Good approach
name === "Ali" ? 1 : name === "Bilal" ? 2 : 3;
```

## Make <em>index.js</em> File Name to Minimize Importing Complexity

If you have a file named `index.js` in a directory named `actions` and you want to import action from it in your component, your import would be like this

```jsx
import { actionName } from "src/redux/actions";
```

`actions` directory path is explained in the above import . Here you don't need to mention `index.js` after `actions` like this

```jsx
import { actionName } from "src/redux/actions/index";
```

## Destructuring of Props

If you want to get rid of writing an object name again and again to access its properties, then destructuring of that object is the best solution for you.
Suppose your component is receiving some values like `name`, `age` and `designation` as props

```jsx
// Bad approach
const Details = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.designation}</p>
    </div>
  );
};

// Good approach
const Details = ({ name, age, designation }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{designation}</p>
    </div>
  );
};
```

## Don't Try to Access Modified State Variable in the Same Function

In a function, if you are assigning a value to a state variable then you won't be able to access that assigned value even after it has been assigned in that function

```jsx
const Message = () => {
  const [message, setMessage] = useState("Hello World");
  const changeMessage = (messageText) => {
    setMessage("Happy Learning");
    console.log(message); // It will print Hello World on console
  };

  return <div>{message}</div>;
};
```

## Use <em>===</em> Operator instead of <em>==</em>

While comparing two values, strictly checking both values and their data types is a good practice.

```jsx
"2" == 2 ? true : false; // true
"2" === 2 ? true : false; // false
```

Now get your hands dirty with these best coding practices in React!