DEV Community

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

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
Collapse
 
yusub profile image
Jouseph Jacob •

you are the best man .

Collapse
 
mrcaidev profile image
mrcaidev •

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.

Collapse
 
brense profile image
Rense Bakker •

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

function My component({children, otherProp}:React.PropsWithChildren<{otherProp:string}>){
  // ...
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zyabxwcd profile image
Akash • • 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

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto •

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

Collapse
 
elijahtrillionz profile image
Elijah Trillionz •

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

Collapse
 
makodev profile image
mako •

This is really nice

Collapse
 
majscript profile image
MajScript •

Nice!

Collapse
 
silverium profile image
Soldeplata Saketos •

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 />;
Enter fullscreen mode Exit fullscreen mode

which would eventually render into:

<input full-width="false"/>
Enter fullscreen mode Exit fullscreen mode

leave it as undefined:

type TextFieldProps = {
    fullWidth?: boolean;
};

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

const App = () => <TextField fullWidth />;
Enter fullscreen mode Exit fullscreen mode

so it can skip the attribute in the HTML

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Dope list thanks for creating it!

Collapse
 
lifeiscontent profile image
Aaron Reisman •

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';
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
akshaysrepo profile image
Akshay S •

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

interface ComponentProps {
children: ReactNode;
}

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

This seems more sensible

Collapse
 
joaozitopolo profile image
Joao Polo •

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

Collapse
 
lico profile image
SeongKuk Han • • Edited

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

Collapse
 
mrdulin profile image
official_dulin •

Several tips are naive.

Collapse
 
aradwan20 profile image
Ahmed Radwan •

Good one!

Collapse
 
anatooly profile image
Antony Bash •

Thank, great solutions.

Collapse
 
klajdi44 profile image
Klajdi Ajdini •

Fenomenal tips @lukeshiru

Collapse
 
wilmela profile image
Wilmela •

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?

Collapse
 
itminhnhut profile image
itminhnhut • • Edited 
import { FC, ReactNode } from 'react';

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

my opinion.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jt3k profile image
Andrey Gurtovoy •

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.