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 = () => {
  setCount(1);
  // ...
};
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…