Rahul Sharma

Posted on Mar 18, 2022 • Edited on Nov 23, 2023

React best practices and patterns to reduce code - Part 2

#react #reactnative #redux #javascript

I've another article about React best practices and patterns to reduce code. It's a good article to read before you start to write your own React code.

React best practices and patterns to reduce code - Part 1

Without wasting time, let's look at some more best practices and patterns to reduce code. We'll start with the most common ones.

If the component doesn't have children's props, use the self-closing tag.

Bad code:



return <Component></Component>;

Good code:



return <Component />;

Don't write functions inside jsx elements.

Bad code:



return (
  <div>
    <button
      onClick={() => {
        setCount(1);
        // ...
      }}
    >
      Click
    </button>
  </div>
);

Good code:



const onClick = useCallback(() => {
  setCount(1);
  // ...
}, [deps]);

return (
  <div>
    <button onClick={onClick}>Click</button>
  </div>
);

Use object state if you have to update multiple states together.

Avoid using multiple setState calls in a row. This is a common mistake that can lead to a lot of unnecessary re-renders. It's better to use a single setState call.

Bad code:



const [count, setCount] = useState(0);
const [name, setName] = useState("");

const onClick = () => {
  setTimeout(() => {
    setName("John");
    setCount(count + 1);
  }, 1000);
};

Good code:



const [state, setState] = useState({
  count: 0,
  name: "",
});

const onClick = () => {
  setTimeout(() => {
    setState((prevState) => ({
      ...prevState,
      name: "John",
      count: prevState.count + 1,
    }));
  }, 1000);
};

Note: React 18 adds automatic batching, so multiple updates will be taken care by react itself.

Use styled-components to style your components. This is a good way to avoid writing CSS in JSX and also helps to avoid CSS setup for the application.

It's completely opinion based.

Bad code:



return <div style={{ backgroundColor: "red" }}></div>;

Good code:



const Container = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
  padding: 1rem;
`;

Better code:



const getPrimaryColor = ({ theme }) => theme.colors.primary;
const getDefaultColor = ({ theme }) => theme.colors.secondary;

const Button = styled.button`
  background-color: ${getPrimaryColor};
  color: ${getDefaultColor};
`;

Note: Create functions to get color and other styles from the theme and pass them to styled components. This will also help to reduce code.

Try to avoid class-based components and use functional components instead.

Bad code:



class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return <button onClick>Click me</button>;
  }
}

Good code:



const Counter = () => {
  const [count, setCount] = useState(0);
  const onClick = () => setCount(count + 1);
  return <button>Click me</button>;
};

NOTE: Functional components not only reduces development time and code but also decrease production bundle size. It reduces the bundle size by almost ~60%.

React.memo to avoid unnecessary re-renders.

Bad code:



return (
  <ui>
    {items.map((item) => (
      <Component>{item}</Component>
    ))}
  </ui>
);

Good code:



const MemoComponent = React.memo(Component);
return (
  <ui>
    {items.map((item) => (
      <MemoComponent>{item}</MemoComponent>
    ))}
  </ui>
);

NOTE: Use React.memo() wisely, don't use memo where component often re-renders with props.

Use JSX ShortHand, Try to use JSX shorthand for passing boolean variables.

Bad code:



return <button disabled={true}>Submit</button>;

Good code:



return <button disabled>Submit</button>;

Use ternary operator instead of if-else statement.

Bad code:



if (isLoading) {
  return <div>Loading...</div>;
} else {
  return <div>Data</div>;
}

Good code:



return isLoading ? <div>Loading...</div> : <div>Data</div>;

Use object(Map) instead of switch statement. I've already mentioned the same in my previous article for reducers.

Bad code:



switch (props.type) {
  case "ADMIN":
    return <Admin />;
  case "USER":
    return <User />;
  default:
    return <NotFound />;
}

Good code:



const componentMap = {
  ADMIN: Admin,
  USER: User
};

const Component = componentMap[props.type] ?? NotFound;
return <Component />;

Better code:



const NotFound = React.lazy(() => import("../components/NotFound"));
const componentMap = {
  ADMIN: React.lazy(() => import("../components/Admin")),
  USER: React.lazy(() => import("../components/User")),
};

const Component = componentMap[props.type] ?? NotFound;
return <Component />;

Use object destructuring instead of passing multiple props by name to a component.

Bad code:



const { name, age, role } = props;
return (
  <>
    <Component name={name} age={age} role={role} />
  </>
);

Good code:



return (
  <>
    <Component {...props} />
  </>
);

Don't need curly braces when you won't pass the string to a component.

Bad code:



return <Component name={"John"} />;

Good code:



return <Component name="John" />;

Don't use react element props like `className`, `style` etc for component custom props.

Bad code:



return (
  <Component style="bordered">
);

Good code:



return (
  <Component variant="bordered">
);

Use fragment instead of html element like div, span, etc.

Bad code:



return (
  <div>
    <span>{props.name}</span>
    <span>{props.age}</span>
  </div>
);

Good code:



return (
  <>
    <span>{props.name}</span>
    <span>{props.age}</span>
  </>
);

Don't use else block if `if` block returns something.

Bad code:



if (props.name) {
  return <div>{props.name}</div>;
} else {
  return <div>No name</div>;
}

Good code:



if (props.name) {
  return <div>{props.name}</div>;
}
return <div>No name</div>;

Use React.fragment instead of Html element like div, span, etc when you won't use the `key` property.

Bad code:



return (
  <container>
    {list.map((item) => (
      <div key={item.id}>
        <SomeComponent />
        <SomeAnotherComponent />
      </div>
    ))}
  </container>
);

Good code:



return (
  <>
    {list.map((item) => (
      <React.Fragment key={item.id}>
        <SomeComponent />
        <SomeAnotherComponent />
      </React.Fragment>
    ))}
  </>
);

Thank you for reading 😊

Got any questions or additional? please leave a comment.

Must Read If you haven't

React redux best practice to reduce code

Rahul Sharma ・ May 3 '22

#react #redux #javascript #typescript

How to cancel Javascript API request with AbortController

Rahul Sharma ・ Apr 9 '22

#javascript #webdev #frontend #html

13 Typescript Utility: A Cheat Sheet for Developer

Rahul Sharma ・ Apr 2 '22

#typescript #javascript #webdev #frontend

How to solve REST API routing problem with decorators?

Rahul Sharma ・ Mar 23 '22

#node #typescript #javascript #express

Catch me on

Rahul Sharma

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Top comments (36)

Eric B • Mar 21 '22

Use object state if you have to update multiple states together

Not really, no. Use useReducer.

Use styled-components

No.

Use object(Map) instead of switch statement

... while there are places where this does make sense, especially if you're in a component that is otherwise 100% declarative, for the most part, avoid.

Use object destructuring instead of passing multiple props by name to a component

Absolutely not. Always pass exactly the parameters you need. Do not ever pass a wholesale ...rest props to a component.

Use fragment

Wow! OK, I was not aware of Fragment. Great tip . . . when it's useful. It has a specific purpose, and your example is not it.

stunaz • Mar 19 '22 • Edited

About the last exemple on the key : why not use the key in SomeComponent even if you dont use the key. i.e. like :

return (
  <>
    {list.map((item) => (
        <SomeComponent  key={item.id}/>
    ))}
  </>
);

Rahul Sharma • Mar 19 '22

Thanks for pointing it out, I've missed one more component. I meant was this

return (
  <>
    {list.map((item) => (
      <React.Fragment key={item.id}>
        <SomeComponent />
        <SomeComponent />
      </React.Fragment>
    ))}
  </>
);

Cédric Teyton • Feb 16 '23

Hello Rahul, FYI we've added your blog post on a GitHub project gathering content about best coding practices :)
github.com/promyze/best-coding-pra...

ianhfar • Mar 24 '22

"Use styled-components to style your components."
This should be highlighted as your opinion.
Not sure you can argue this is a must.

By separating your styling into a css file, you are not polluting your source with styling.

Rahul Sharma • Mar 24 '22

Thanks for suggestions, I've added.

Comment hidden by post author - thread only accessible via permalink

eBitzu • Mar 19 '22

Please delete sections of your article you don't know how they really work. The worst thing you can do is to teach people bad stuff

Multiple setState are now batched.
Functions outside of jsx but inside component are basically the same thing, new function on every render
Props destructoring is considered bad practice
React.Fragment suports key

John Soriano • Mar 20 '22 • Edited

All your complaints are addressed in this post.

He said multiple states can be batched. there are notes. are you read the post?
Isn't re-render or re-evaluate the function because it wraps in useCallback, you just have pass to deps in order not to re-evaluate. please educate.
Who said destructuring is bad practice? it's one of Javascript edge, as long as you know the props being passed.
React.Fragment he said that, are you reading the post?

Rahul Sharma • Mar 20 '22

@johnsoriano Has already answered few of questions.

React batching is not available in the current react version. It'll be available for react-18, react-18 is rc releasead.

eBitzu • Mar 20 '22 • Edited

Stop saying I don't read the article, as the article was updated after my comments. Use you brain...

Batching is available in 17, but not for async situations like setTimeout

Rahul Sharma • Mar 20 '22 • Edited

I agreed, but that's why I added setTimeout in my example. I've not updated article example, I just added note of react 18.

Max Saperstone • Mar 20 '22

This is a great article. One thing I've done in the past is setup ESLint to catch some things like this. I'll look to see if I can add some more, but it'll auto catch and even fix a lot of these things

Anish De • Mar 20 '22

This is quite an useful article!

I have 1 question, what is wrong with using props like className for component props? Maybe I have a Button component that has some pre-defined styles but I will also keep the option to add more styles later on (say margins or text size) using the className prop whenever I re-use the component. Will it be not a better way than declaring variants for every possible situation?

Rahul Sharma • Mar 20 '22 • Edited

You can use there is no hard and fast rule, But try to avoid for any custom prop. let say you have button component you want 2 types of button contained and ghost, so don't use like style="ghost" or style="contained".

const type = "ghost" === props.style ? "something" : "something"

Anish De • Mar 20 '22

Ah, I see.

dommirr • Mar 19 '22

it's good to know React.memo to avoid unnecessary renders. But I think it is more important to know how to make good use of React.memo since we tend to misuse it.

Rahul Sharma • Mar 20 '22

Good point, I'll add note for that. Thank you for pointing it out 😊

Gabriel Linassi • Mar 24 '22 • Edited

I'd add some more:

Composition
Extract useEffect logic into a custom hook
Try to use useRef instead of useState for inputs
Don't put into state info you can get from reading other states

Examples:

<Layout>
   <Layout.SidePanel>{ ... }</Layout.SidePanel>
   <Layout.Main>{ ... }</Layout.Main>
</Layout>

const { cart, loading, error } = useCart()
...
return cart.items.map(item => (...))

Mario Lemus • Mar 19 '22

Pretty good content, ¡thanks!

View full discussion (36 comments)

Some comments have been hidden by the post's author - find out more

React best practices and patterns to reduce code - Part 1

If the component doesn't have children's props, use the self-closing tag.

Bad code:

Good code:

Don't write functions inside jsx elements.

Bad code:

Good code:

Use object state if you have to update multiple states together.

Bad code:

Good code:

Use styled-components to style your components. This is a good way to avoid writing CSS in JSX and also helps to avoid CSS setup for the application.

Bad code:

Good code:

Better code:

Try to avoid class-based components and use functional components instead.

Bad code:

Good code:

React.memo to avoid unnecessary re-renders.

Bad code:

Good code:

Use JSX ShortHand, Try to use JSX shorthand for passing boolean variables.

Bad code:

Good code:

Use ternary operator instead of if-else statement.

Bad code:

Good code:

Use object(Map) instead of switch statement. I've already mentioned the same in my previous article for reducers.

Bad code:

Good code:

Better code:

Use object destructuring instead of passing multiple props by name to a component.

Bad code:

Good code:

Don't need curly braces when you won't pass the string to a component.

Bad code:

Good code:

Don't use react element props like className, style etc for component custom props.

Bad code:

Good code:

Use fragment instead of html element like div, span, etc.

Bad code:

Good code:

Don't use else block if if block returns something.

Bad code:

Good code:

Use React.fragment instead of Html element like div, span, etc when you won't use the key property.

Bad code:

Good code:

Must Read If you haven't

React redux best practice to reduce code

Rahul Sharma ・ May 3 '22

How to cancel Javascript API request with AbortController

Rahul Sharma ・ Apr 9 '22

13 Typescript Utility: A Cheat Sheet for Developer

Rahul Sharma ・ Apr 2 '22

How to solve REST API routing problem with decorators?

Rahul Sharma ・ Mar 23 '22

Catch me on

Rahul SharmaFollow

Read next

How to Stop Spam Comments on WordPress WITHOUT Any Plugin

How to run cypress run and cypress open at a time

Optimizing React Re-Renders: Best Practices for Performance

Generate a documentation site using Nextra

Don't use react element props like `className`, `style` etc for component custom props.

Don't use else block if `if` block returns something.

Use React.fragment instead of Html element like div, span, etc when you won't use the `key` property.

Rahul Sharma