Best practices to follow in React

I have built from one page websites to complex webapps to Android and iOS apps using react in the past 3 years. React is a very powerful tool when we write the code the right way otherwise it’s a pain to solve any bugs which might come around or scale the codebase with increasing number of team members and new features.

In this post, I will write about some common React pitfalls new developers face.

1. Proper Component and codebase structures

• This is a very good project structure to follow for your projects and your team is small to medium.

• If you are ever CTRL+C (copying) and CTRL+V(pasting) chunks of code, most likely you are doing it wrong.

  • Figure out a solution to use a combination of redux store and/or props to accomplish what you are trying to do. Don’t take the shortcut and copy the code over.

• Extract the duplicate code into components

2. Async/Await inside useEffect

Bad:

const fetchData = async () => {
		const resp = await fetch(url)
		setData(resp.data)
}

useEffect(async () => {	
		await fetchData()
}, [])

Good:

useEffect(() => {
	const fetchData = async () => {
		const resp = await fetch(url)
		setData(resp.data)
	}

	fetchData()
}, [])

Bad because useEffect expects a function to be provided but in the bad approach, we give the useEffect a Promise

3. Use global state management, don’t just pass props around

• If your application flow is composed of many components and require it to pass down the data. My preference is when you pass around the same data more than 3 levels of nested components, then it’s time to put that data in global state

  • Example: Logged in user data, this is a sort of data which can be needed in any part of your app so it’s best to store it in the global state.

• If the sibling components share the same data, you can either put the data in global state or in the state of the parent component. In this case, it’s upto your situation where the data is best stored.

4. Don’t write inline css please!

My rule of thumb is if you are writing more than 3 CSS properties in-line, you need to extract them out to a better place.

When we write in-line CSS objects, they get redeclared everytime react re-renders your component.

For react-native, use StyleSheet to write CSS for your components

For React on Web, use styled-components , .css files, or in some javascript const variable

5. Not Using PropTypes or TypeScript

Not defining prop types (in regular React) or not using TypeScript can lead to bugs that are hard to trace, as there’s no validation on the types of props a component receives.

I once spent two days trying to figure out why a 3rd party library wasn’t working the way it should. I had to fork it, import the library’s code in my codebase, and put console statements and run debugger to figure that the library was passing an Object where it should have been passing an Array 🤦

And guess what? This library wasn’t using any prop type validation.

If you have any other tips or recommendations for React code, let me know on twitter @shivam_310 or mail me at shivamsinghal5432 [AT] gmail [DOT] com