An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
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 while updating the state
It is always advisable to set state as a function of the previous state if the new state relies on the previous state. React state updates can be batched, and not writing your updates this way can lead to unexpected results.
Bad Example:
import React, { useState } from "react";export const App = () => { const [isDisabled, setIsDisabled] = useState(false); const toggleButton = () => { setIsDisabled(!isDisabled); }; // here toggling twice will yeild the same result // as toggling once const toggleButtonTwice = () => { toggleButton(); toggleButton(); }; return ( <div> <button disabled={isDisabled}> I'm {isDisabled ? "disabled" : "enabled"} </button> <button onClick={toggleButton}> Toggle button state </button> <button onClick={toggleButtonTwice}> Toggle button state 2 times </button> </div> );};
Good example:
import React, { useState } from "react";export const App = () => { const [isDisabled, setIsDisabled] = useState(false); const toggleButton = () => { setIsDisabled((isDisabled) => !isDisabled); }; const toggleButtonTwice = () => { toggleButton(); toggleButton(); }; return ( <div> <button disabled={isDisabled}> I'm {isDisabled ? "disabled" : "enabled"} </button> <button onClick={toggleButton}> Toggle button state </button> <button onClick={toggleButtonTwice}> Toggle button state 2 times </button> </div> );};
3. Keep your files lean & clean
Keeping your files atomic and lean makes debugging, maintaining, and even finding the files a walk in the park!
Bad Example:
// src/App.tsxexport default function App() { const posts = [ { id: 1, title: "How to write clean react code", }, { id: 2, title: "Eat, sleep, code, repeat", }, ]; return ( <main> <nav> <h1>App</h1> </nav> <ul> {posts.map((post) => ( <li key={post.id}> {post.title} </li> ))} </ul> </main> );}
Good Example:
// src/App.tsxexport default function App() { return ( <main> <Navigation title="App" /> <Posts /> </main> );}// src/components/Navigation.tsxinterface NavigationProps { title: string;}export default function Navigation({ title }: NavigationProps) { return ( <nav> <h1>{title}</h1> </nav> );}// src/components/Posts.tsxexport default function Posts() { const posts = [ { id: 1, title: "How to write clean react code", }, { id: 2, title: "Eat, sleep, code, repeat", }, ]; return ( <ul> {posts.map((post) => ( <Post key={post.id} title={post.title} /> ))} </ul> );}// src/components/Post.tsxinterface PostProps { title: string;}export default function Post({ title }: PostProps) { return <li>{title}</li>;}
4. Use Enums or Constant Objects for values with multiple states
The process of managing variables that can take multiple states can be eased a lot by using Enums
or Constant Objects
.
Bad Example:
import React, { useState } from "react";export const App = () => { const [status, setStatus] = useState("Pending"); return ( <div> <p>{status}</p> <button onClick={() => setStatus("Pending")}> Pending </button> <button onClick={() => setStatus("Success")}> Success </button> <button onClick={() => setStatus("Error")}> Error </button> </div> );};
Good Example:
import React, { useState } from "react";enum Status { Pending = "Pending", Success = "Success", Error = "Error",}// OR// const Status = {// Pending: "Pending",// Success: "Success",// Error: "Error",// } as const;export const App = () => { const [status, setStatus] = useState(Status.Pending); return ( <div> <p>{status}</p> <button onClick={() => setStatus(Status.Pending)}> Pending </button> <button onClick={() => setStatus(Status.Success)}> Success </button> <button onClick={() => setStatus(Status.Error)}> Error </button> </div> );};
5. Use TS-free TSX as much as possible
How can TSX be TS-free?
Relax, we are talking only about the Markup part NOT the entire component. Keeping it function-free makes the component easier to understand.
Bad Example:
const App = () => { return ( <div> <button onClick={() => { // ... }} > Toggle Dark Mode </button> </div> );};
Good Example:
const App = () => { const handleDarkModeToggle = () => { // ... }; return ( <div> <button onClick={handleDarkModeToggle}> Toggle Dark Mode </button> </div> );};
NOTE: If the logic is a one-liner, then using it in the TSX is quite acceptable.
6. Elegantly Conditionally Rendering Elements
Conditionally rendering elements is one of the most common tasks in React, thus using clean conditionals is a necessity.
Bad Example:
const App = () => { const [isTextShown, setIsTextShown] = useState(false); const handleToggleText = () => { setIsTextShown((isTextShown) => !isTextShown); }; return ( <div> {isTextShown ? <p>Now You See Me</p> : null} {isTextShown && <p>`isTextShown` is true</p>} {!isTextShown && <p>`isTextShown` is false</p>} <button onClick={handleToggleText}>Toggle</button> </div> );};
Good Example:
const App = () => { const [isTextShown, setIsTextShown] = useState(false); const handleToggleText = () => { setIsTextShown((isTextShown) => !isTextShown); }; return ( <div> {isTextShown && <p>Now You See Me</p>} {isTextShown ? ( <p>`isTextShown` is true</p> ) : ( <p>`isTextShown` is false</p> )} <button onClick={handleToggleText}>Toggle</button> </div> );};
7. Use JSX shorthands
Boolean Props
A truthy prop can be provided to a component with just the prop name without a value like this: truthyProp
. Writing it like truthyProp={true}
is unnecessary.
Bad Example:
interface TextFieldProps { fullWidth: boolean;}const TextField = ({ fullWidth }: TextFieldProps) => { // ...};const App = () => { return <TextField fullWidth={true} />;};
Good Example:
interface TextFieldProps { fullWidth: boolean;}const TextField = ({ fullWidth }: TextFieldProps) => { // ...};const App = () => { return <TextField fullWidth />;};
String Props
A String Prop value can be provided in double-quotes without the use of curly braces or backticks.
Bad example:
interface AvatarProps { username: string;}const Avatar = ({ username }: AvatarProps) => { // ...};const Profile = () => { return <Avatar username={"John Wick"} />;};
Good example:
interface AvatarProps { username: string;}const Avatar = ({ username }: AvatarProps) => { // ...};const Profile = () => { return <Avatar username="John Wick" />;};
Undefined Props
Just like basic TypeScript/JavaScript, if a prop is not provided a value, it will be undefined
.
Bad Example:
interface AvatarProps { username?: string;}const Avatar = ({ username }: AvatarProps) => { // ...};const Profile = () => { return <Avatar username={undefined} />;};
Good Example:
interface AvatarProps { username?: string; // OR `username: string | undefined`}const Avatar = ({ username }: AvatarProps) => { // ...};const Profile = () => { return <Avatar />;};
Now you too know how to write clean TSX!
Research says, writing down your goals on pen & paper makes you 21% to 39% more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
Follow me on Instagram to check out what I am up to recently.
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Original Link: https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To