DEV Community

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

View post
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