React best practices and patterns to reduce code - Part 2

I've another article about React's 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.

Using self-closing tags when appropriate can help make your code more concise and readable, especially when dealing with components that don't require any nested content.

Don't write functions inside jsx elements.

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.

Note: React 18 adds automatic batching, so multiple updates will be taken care of 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.

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.

The React.memo higher-order component (HOC) is used to optimize the performance of functional components by preventing unnecessary re-renders. When you wrap a component with React.memo, it memoizes the component and only re-renders it if the props have changed.

React.memo performs a shallow equality check on the component props by default.

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

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

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

Use the ternary operator instead of the if-else statement

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

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

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

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

Use fragments instead of HTML elements like div, span, etc.

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

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

Thank you for taking the time to read about "React best practices and patterns to reduce code". If you have any questions or comments, please feel free to leave them below. We would love to hear your thoughts on this topic and help you in any way we can. Let's continue the conversation!

Must Read If you haven't

• React best practices and patterns to reduce code - Part 1
• React.js state management using signals
• What, Why, and How Do Javascript Static Initialization Blocks?
• 28 Javascript Array Methods: A Cheat Sheet for Developer
• 5 Features of Google's Bard that You Won't Find in OpenAI's ChatGPT

Catch me on YouTube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon, and Blogspot. I share a lot of content related to these topics, including tutorials, articles, and code samples. Don't hesitate to follow or reach out to me on any of these platforms if you have any questions or want to connect. Thank you for your interest in Preact Signals and happy coding!