DEV Community

Cover image for 7 Tips for Clean React TypeScript Code you Must Know ๐Ÿงนโœจ
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

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) => {
  // ...
};


Enter fullscreen mode Exit fullscreen mode

Bad Example 02:



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


Enter fullscreen mode Exit fullscreen mode

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) => {
  // ...
};


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

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.tsx
export 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>
  );
}


Enter fullscreen mode Exit fullscreen mode

Good Example:



// src/App.tsx
export default function App() {
  return (
    <main>
      <Navigation title="App" />
      <Posts />
    </main>
  );
}

// src/components/Navigation.tsx
interface NavigationProps {
  title: string;
}

export default function Navigation({ title }: NavigationProps) {
  return (
    <nav>
      <h1>{title}</h1>
    </nav>
  );
}

// src/components/Posts.tsx
export 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.tsx
interface PostProps {
  title: string;
}

export default function Post({ title }: PostProps) {
  return <li>{title}</li>;
}


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

Good Example:



const App = () => {
  const handleDarkModeToggle = () => {
    // ...
  };

  return (
    <div>
      <button onClick={handleDarkModeToggle}>
        Toggle Dark Mode
      </button>
    </div>
  );
};


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

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>
  );
};


Enter fullscreen mode Exit fullscreen mode

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} />;
};


Enter fullscreen mode Exit fullscreen mode

Good Example:



interface TextFieldProps {
  fullWidth: boolean;
}

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

const App = () => {
  return <TextField fullWidth />;
};


Enter fullscreen mode Exit fullscreen mode

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"} />;
};


Enter fullscreen mode Exit fullscreen mode

Good example:



interface AvatarProps {
  username: string;
}

const Avatar = ({ username }: AvatarProps) => {
  // ...
};

const Profile = () => {
  return <Avatar username="John Wick" />;
};


Enter fullscreen mode Exit fullscreen mode

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} />;
};


Enter fullscreen mode Exit fullscreen mode

Good Example:



interface AvatarProps {
  username?: string;
  // OR `username: string | undefined`
}

const Avatar = ({ username }: AvatarProps) => {
  // ...
};

const Profile = () => {
  return <Avatar />;
};


Enter fullscreen mode Exit fullscreen mode

Now you too know how to write clean TSX!

victory-dance

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

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.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Top comments (21)

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!