How to write clean React code: 13 tips for better readability and maintainability

Photo by James Harrison on Unsplash

Clean code

  • giving variables and functions meaningful names
  • making functions do one thing — one that is in its name
  • creating functions that have max 3 parameters (less is even better)
  • avoiding complex nested if statements
  • not adding unnecessary context

Avoid duplications

TypeScript

Organizing imports

  • 3rd party libraries (React, lodash, etc) imports
  • company libraries imports (if there are any)
  • locale imports
Before grouping and sorting imports
After grouping and sorting props

Sorted variables, props, state

Before grouping and sorting props
After grouping and sorting props

Directly updating props or state

Functions defined before use

Arrow functions

Standard function
Arrow function

Small and reusable components

Functional vs Class components

Class-based component
Functional component

async/await

classnames

Code refactor

--

--

--

Senior Software Engineer and Writing Enthusiast.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Vue 3 Composition API: Basics and Patterns

HW 3 — Loops and Conditionals

Introduction to React v18 Suspense and Render-as-You-Fetch approach

Why You Should Use Picture Tag Instead of Img Tag

Using Reduce in JavaScript

Way to use 3rd party libraries in TypeScript

How Next.js helped me understand react framework

Using json functions by Doctrine QueryBuilder

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amel Halilovic

Amel Halilovic

Senior Software Engineer and Writing Enthusiast.

More from Medium

Give Me 5 Minutes — and I’ll Teach You How to Find the Time Complexity of an Algorithm

MobX likes mutability. React does not

ReactJS in a glimpse

No Need to OverReact! React Router Version 6 is Here!