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...
Collapse
 
yusub profile image
Yusub Yacob

you are the best man .

Collapse
 
mrcaidev profile image
Yuwang Cai

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
 
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
 
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
 
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
 
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
 
makodev profile image
mako

This is really nice

Collapse
 
majscript profile image
MajScript

Nice!

Collapse
 
akshaysrepo profile image
Akshay S

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

interface ComponentProps {
children: ReactNode;
}

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

This seems more sensible

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
 
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
 
mrdulin profile image
official_dulin

Several tips are naive.

Collapse
 
anatooly profile image
Antony Bash

Thank, great solutions.

Collapse
 
klajdi44 profile image
Klajdi Ajdini

Fenomenal tips @lukeshiru

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
 
aradwan20 profile image
Ahmed Radwan

Good one!

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