What are Your Best Practices for Writing React Code

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.