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

An Introduction to React

Component Communication & Dynamic Views

JavaScript String Functions

Why LifterLMS?

In this blog post I will explain you one of the confusing feature of Scala for beginners i.e

React-Redux and Enzyme— An overview

My first React application, using a Leaflet library.

Host your create-react-app on Firebase (2021)

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

functional Componnts-ReactJs

10 VS Code Extensions to Fight Technical Debt

Sorting Table Columns

Writing Cleaner, More Efficient Code With React’s Context API

Laptop on a desk with VS Code open, displaying code on the screen