Education logo

React best practices and patterns to reduce code - Part 2

React best practices and patterns to reduce code - Part 2

By Rahul SharmaPublished about a year ago 3 min read

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.

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

Don't write functions inside jsx elements.

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.

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

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.

Use styled components to style your components.

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.

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

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

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 JSX ShortHand, Try to use JSX shorthand for passing boolean variables.

Use the ternary operator instead of the if-else statement

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

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

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

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

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

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

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.

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

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!

how toteacherstudentinterviewdegreecoursescollege

About the Creator

Rahul Sharma

I'm a technology enthusiast who does web development. Passionate to contribute to open-source projects and making cool products.

✔ I’m currently learning about Flutter

✔ Ask me anything you want, If I'm alive I will answer within seconds 😉

Enjoyed the story?
Support the Creator.

Subscribe for free to receive all their stories in your feed. You could also pledge your support or give them a one-off tip, letting them know you appreciate their work.

Subscribe For Free

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

    RSWritten by Rahul Sharma

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2024 Creatd, Inc. All Rights Reserved.