React Best Practices

Use JSX ShortHand

Try to use JSX shorthand for passing boolean variables. Let's say you want to control the title visibility of a Navbar component.

Bad:

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

Good:

return(
  <Navbar showTitle />  
)

↥ back to top

Use Ternary Operators

Let's say you want to show a particular user's details based on role.

Bad:

const { role } = user;

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

Good:

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

↥ back to top

Use Object Literals

Object literals can help make our code more readable. Let's say you want to show three types of users based on their role. You can't use ternary because the number of options is greater than two.

Bad:

const {role} = user

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

Good:

const {role} = user

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

const Component = components[role];

return <Componenent />;

↥ back to top

Use Fragments

Always use Fragment over Div. It keeps the code clean and is also beneficial for performance because one less node is created in the virtual DOM.

Bad:

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

Good:

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

↥ back to top

Do not define a function inside Render

Don't define a function inside render. Try to keep the logic inside render to an absolute minimum.

Bad:

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

Good:

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

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

↥ back to top

Use Memo

React.PureComponent and Memo can significantly improve the performance of your application. They help us to avoid unnecessary rendering.

Bad:

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>;
};

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. Output

Let's edit the ChildrenComponent to this:

Good:

import React ,{useState} from "react";

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

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

↥ back to top

Put CSS in JavaScript

Try to avoid raw JavaScript when you are writing React applications because organizing CSS is far harder than organizing JS.

Bad:

// CSS FILE

.body {
  height: 10px;
}

//JSX

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

Good:

const bodyStyle = {
  height: "10px"
}

return <div style={bodyStyle}>

</div>

↥ back to top

Use Object Destructuring

Use object destructuring to your advantage. Let's say you need to show a user's details.

Bad:

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

Good:

const { name, age, profession } = user;

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

↥ back to top

String Props do not need Curly Braces

When passing string props to a children component.

Bad:

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

Good:

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

↥ back to top

Remove JS Code From JSX

Move any JS code out of JSX if that doesn't serve any purpose of rendering or UI functionality.

Bad:

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

Good:

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}> {post.title} </li>
    ))}
  </ul>
);

↥ back to top

Use Template Literals

Use template literals to build large strings. Avoid using string concatenation. It's nice and clean.

Bad:

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

return (
  <div> {userDetails} </div>  
)

Good:

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

return (
  <div> {userDetails} </div>  
)

↥ back to top

Import in Order

Always try to import things in a certain order. It improves code readability.

Bad:

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';

Good:

The rule of thumb is to keep the import order like this: Built-in External Internal So the example above becomes:

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

↥ back to top

Use Implicit return

Use the JavaScript feature of implicit return to write beautiful code. Let's say your function does a simple calculation and returns the result.

Bad:

const add = (a, b) => {
  return a + b;
}

Good:

const add = (a, b) => a + b;

↥ back to top

Component Naming

Always use PascalCase for components and camelCase for instances.

Bad:

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;

Good:

import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;

↥ back to top

Reserved Prop Naming

Do not use DOM component prop names for passing props between components because others might not expect these names.

Bad:

<MyComponent style="dark" />

<MyComponent className="dark" />

Good:

<MyComponent variant="fancy" />

↥ back to top

Quotes

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

Bad:

<Foo bar='bar' />

<Foo style= />

Good:

<Foo bar="bar" />

<Foo style= />

↥ back to top

Prop Naming

Always use camelCase for prop names or PascalCase if the prop value is a React component.

Bad:

<Component
  UserName="hello"
  phone_number={12345678}
/>

Good:

<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

↥ back to top

JSX in Parentheses

If your component spans more than one line, always wrap it in parentheses.

Bad:

return <MyComponent variant="long">
           <MyChild />
         </MyComponent>;

Good:

return (
    <MyComponent variant="long">
      <MyChild />
    </MyComponent>
);

↥ back to top

Self-Closing Tags

If your component doesn't have any children, then use self-closing tags. It improves readability.

Bad:

<SomeComponent variant="stuff"></SomeComponent>

Good:

<SomeComponent variant="stuff" />

↥ back to top

Underscore in Method Name

Do not use underscores in any internal React method.

Bad:

const _onClickHandler = () => {
  // do stuff
}

Good:

const onClickHandler = () => {
  // do stuff
}

↥ back to top

Alt Prop

Always include an alt prop in your <img > tags. And do not use picture or image in your alt property because the screenreaders already announce img elements as images. No need to include that.

Bad:

<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />

Good:

<img src="hello.jpg" alt="Me waving hello" />

↥ back to top

Short-Circuit evaluation in JSX

Bad:

// Avoid
const sampleComponent = () => {
  return isTrue ? <p>True!</p> : null
};

Good:

// Recommended: short-circuit evaluation
const sampleComponent = () => {
  return isTrue && <p>True!</p>
};

↥ back to top