React best practices and patterns to reduce code — Part 2

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

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 = () => {…