7 Tips for Clean React TypeScript Code you Must Know 🧹✨

Clean code isn’t code that just works. It refers to neatly organized code which is easy to read, simple to understand and a piece of cake to maintain.

Let’s take a look at some of the best practices for clean code in React, which can take the ease of maintaining your code to the moon! 🚀🌕

1. Provide explicit types for all values

Quite often while using TypeScript a lot of people skip out on providing explicit types for values, thus missing out on the true benefit TypeScript has to offer. Often these can be seen in code-base:

Bad Example 01:

const Component = ({ children }: any) => {
  // ...
};

Bad Example 02:

const Component = ({ children }: object) => {
  // ...
};

Instead using a properly defined interface would make your life so much easier, with the editor providing you accurate suggestions.

Good Example:

import { ReactNode } from "react";
interface ComponentProps {
  children: ReactNode;
}
const Component = ({ children }: ComponentProps) => {
  // ...
};

2. Take the previous state into account…