21 Best Practices for a Clean React Project

React's flexibility requires disciplined structure to keep projects clean and maintainable.

Below are 21 best‑practice rules, each shown with a bad example and a corrected good example.

1. Use JSX shorthand

Pass boolean props without an explicit value.

Bad ❌

return <Navbar showTitle={true} />;

Good ✔

return <Navbar showTitle />;

2. Use ternary operator

Render components based on a condition in a single expression.

Bad ❌

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

Good ✔

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

3. Use object literal mapping

When more than two options exist, map roles to components.

Bad ❌

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

Good ✔

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser,
};
const Component = components[role];
return <Component />;

4. Use Fragments syntax

Prefer <>... fragments over extra div wrappers.

Bad ❌

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

Good ✔

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

5. Do not define functions inside render

Keep render logic minimal; define handlers outside.

Bad ❌

return (
  <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>
    {/* bad example */}
  </button>
);

Good ✔

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

6. Use Memo

Wrap pure components with React.memo to avoid unnecessary re‑renders.

Bad ❌

import React, { useState } from "react";
export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};
const ChildrenComponent = ({ userName }) => {
  console.log("rendered", userName);
  return <div>{userName}</div>;
};

Good ✔

import React, { useState } from "react";
const ChildrenComponent = React.memo(({ userName }) => {
  console.log("rendered");
  return <div>{userName}</div>;
});

7. Put CSS in JavaScript

(Content omitted – placeholder warning in original).

8. Use object destructuring

Extract needed fields before rendering.

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>
  </>
);

9. No braces for string props

Bad ❌

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

Good ✔

return <Navbar title="My Special App" />;

10. Remove JS from JSX

Bad ❌

return (
  <ul>
    {posts.map(post => (
      <li onClick={(event) => { console.log(event.target, "clicked!"); }} 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>
);

11. Use template strings

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

12. Import order

Follow the order: built‑ins, external libraries, then local modules.

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 ✔

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

13. Implicit return

Bad ❌

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

Good ✔

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

14. Component naming

Use PascalCase for component definitions and camelCase for instances.

Bad ❌

import reservationCard from "./ReservationCard";
const ReservationItem = <ReservationCard />;

Good ✔

import ReservationCard from "./ReservationCard";
const reservationItem = <ReservationCard />;

15. Preserve prop naming

Bad ❌

<MyComponent style="dark" />
<MyComponent className="dark" />

Good ✔

<MyComponent variant="fancy" />

16. Quote usage

Bad ❌

<Foo bar='bar' />
<Foo style={{ left: "20px" }} />

Good ✔

<Foo bar="bar" />
<Foo style={{ left: '20px' }} />

17. Prop parameter naming

Bad ❌

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

Good ✔

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

18. Parenthesize JSX spanning multiple lines

Bad ❌

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

Good ✔

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

19. Self‑close empty tags

Bad ❌

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

Good ✔

<SomeComponent variant="stuff" />

20. No underscore in internal method names

Bad ❌

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

Good ✔

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

21. Alt text for images

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" />

Reference

21 Best Practices for a Clean React Project

Conclusion

Follow these guidelines to keep your React codebase clean, readable, and performant. The author also shares two open‑source projects—create‑neat and an online collaborative code editor—for further learning.