DEV Community

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

Tapajyoti Bose on July 17, 2022

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

Read full post

Yusub Yacob • Jan 4 '23

you are the best man .

Yuwang Cai • Jul 17 '22

Great article!
A little complain about conditional rendering in React: Even though ternary expression is the best solution I know, these brackets still makes my code looking like a mess. And I really love the v-if directive in vue, which surprises me a lot at first glance.

Rense Bakker • Jul 17 '22

You can use this as a type for your components that use children:

function My component({children, otherProp}:React.PropsWithChildren<{otherProp:string}>){
  // ...
}

Raí B. Toffoletto • Jul 19 '22

Well remembered, the setter of useState is already memoised, no need to wrap in a usrCallback.

Thanks for the article @ruppysuppy and the tips @lukeshiru

Akash • Jul 24 '22 • Edited

I am in love with the variable name 'truthyProp' lol
I think one of the weird thing Software Developers develop over time is admiration towards amazing variable names. Whenever I name one or see one, I get so happy and obsessed over it XD. It gives such a pleasurable feeling haha

Elijah Trillionz • Jul 18 '22

A really good writeup.
Thanks for this article.
I like the fact that you made bad examples and good examples, so I can see the "me" now, and the "me" I ought to be 😁.

Soldeplata Saketos • Jul 21 '22

For point #7 I would even add:
"Don't set unneeded falsey values, as they render as attributes in HTML"
instead of

type TextFieldProps = {
    fullWidth?: boolean;
};

const TextField = ({ fullWidth = false }: TextFieldProps) => {};

const App = () => <TextField fullWidth />;

which would eventually render into:

<input full-width="false"/>

leave it as undefined:

type TextFieldProps = {
    fullWidth?: boolean;
};

const TextField = ({ fullWidth }: TextFieldProps) => {};

const App = () => <TextField fullWidth />;

so it can skip the attribute in the HTML

Andrew Baisden • Jul 23 '22

Dope list thanks for creating it!

mako • Jul 17 '22

This is really nice

MajScript • Jul 17 '22

Nice!

Akshay S • Jul 17 '22

`import { ReactNode ,FC } from "react";

interface ComponentProps {
children: ReactNode;
}

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

This seems more sensible

Aaron Reisman • Jul 19 '22

fwiw, you shouldn't be using interfaces unless you want to enhance a type.

e.g.:

interface Example {}

interface Example {
    foo: 'bar';
}

interface Example {
    baz: 'qux';
}

type Foo = Example['foo'];
type Baz = Example['baz'];


// @ts-expect-error TExample is defined
type TExample = {}

// @ts-expect-error TExample cannot be redefined
type TExample = {
    foo: 'bar';
}

Wilmela • Jul 17 '22

Very well written, thanks. However on point no. 3. When you have a simple component you won't be using else where, doesn't it make sense creating it in the same file instead of a whole new file?

official_dulin • Jul 18 '22

Several tips are naive.

Antony Bash • Jul 18 '22

Thank, great solutions.

Klajdi Ajdini • Jul 22 '22

Fenomenal tips @lukeshiru

itminhnhut • Jul 18 '22 • Edited

import { FC, ReactNode } from 'react';

interface ComponentProps {
    children: ReactNode;
}
const LeadsList: FC<ComponentProps> = () => {}

my opinion.

Ahmed Radwan • Jul 17 '22

Good one!

Joao Polo • Jul 19 '22

Awesome, and really useful. I learned some new things, but my favorite was "Use TS-free TSX as much as possible"

SeongKuk Han • Jul 20 '22 • Edited

Agree with third one. in some cases(when it's over used), that makes a project too complicated.

Andrey Gurtovoy • Jul 20 '22

damn good answer, thanks! now I have an argument to explain my actions in the code. if I had just read the article, then there would be less such argumentation.