What are Your Best Practices for Writing React Code

・1 min read

React JS has lot of complexity in terms of concept for beginners. And there multiple ways of doing things. I am sure all of us have different approach to writing code, testing it and deploying it.

So my question is for those who have set some flow or process for react projects.

What are some of the practices that you follow while working on react project?

Did you find this post useful? Show some love!
DISCUSSION (3)
 

Use Stateless Functional Components wherever possible. This helps to reduce code bloat and just makes things easier to read. Also try to avoid hard coding data into the components. Hard coding data makes it less reusable because it can only be used in very specific cases.

I'm not sure if it's best practice or just personal preference, but I know some people also like to create an object containing the items they're passing into a component as props for instance ({this, is, a, prop}) => {}. I'm lazy and just do (props) => {}. I'd be curious to find out what other's preferences are about this.

 

When working with a component's state, clone the state while assigning it to a new variable.

ex.

let item = this.state.item; // (No)
let item = {...this.state.item}; // (Do this instead)
let item = [...this.state.items] // (Or do this if it's an array)

Ran into issues, especially in multi-person teams, where we'd forget that item references the component's state. item would later get reassigned, or properties get changed, and then component's state is mutated!

 

Making sure my containers are lean with less rendering. Most of the DOM rendering is handled by the functional components.

Classic DEV Post from Oct 30 '18

Realizations from being a frustrated developer

There are developers out there like me who struggles to step up his/her game.

Mahesh K
Join dev.to

The fastest growing software community.
Free forever.