✔5 Best Practices for Writing Cleaner and More Readable React Code

In the world of software development, code readability is paramount. We spend more time reading code than writing it, making it crucial to adopt practices that enhance clarity and maintainability. In this article, we'll explore five better React code practices that contribute to improved code readability.

1. Always Add Keys When Using Map

One common scenario in React involves mapping over arrays to render components dynamically. To enhance readability and optimize React's rendering performance, always include keys when using the map function.

// ❌ Not-so-good
{data.map(item => <MyComponent />)}

// ✅ BETTER
{data.map(item => <MyComponent key={item.id} />)}

Adding unique keys helps React efficiently update and re-render components, providing a smoother user experience. 🔄

2. Use Callback Functions Instead of State Dependencies:

When working with the useCallback hook in React, it's a good practice to use callback functions for state updates instead of including the state variable as a dependency.

// ❌ Not-so-good
const decrement = useCallback(() => setCount(count - 1), [setCount, count])

// ✅ BETTER
const decrement = useCallback(() => setCount(prevCount => prevCount - 1), [])

This practice avoids unnecessary dependencies in the dependency array and ensures that the correct state is captured when the callback is invoked. 🔄

3. Simplify Complex Conditionals and Exit Early:

To enhance code readability, simplify complex conditionals and exit early when possible. This not only reduces nesting but also makes the code more straightforward.

// 🙈 Not-so-good
if (loading) {
  return
} else if (error) {
  return
} else if (data) {
  return
} else {
  throw new Error('This should be impossible')
}

// ✅ BETTER
if (loading || error || data) {
  return
}

throw a new Error('This should be impossible')

By breaking down complex conditionals and exiting early, you improve code readability and reduce cognitive load. 🚀

4. Use Short-Circuit Evaluation for Conditionals in JSX:

When rendering components conditionally in JSX, leverage short-circuit evaluation for cleaner and more concise code.

// Instead of
const sampleComponent = () => {
  return isTrue ? <YourComponent/> : null;
};

// Use short-circuit evaluation
const sampleComponent = () => {
  return isTrue && <YourComponent/>;
};

Short-circuit evaluation allows you to express conditional rendering in a more concise manner, making your JSX more readable. 🌐

5. Destructure Props in Function Parameters:

When working with component props, destructure them directly in the function parameters. This not only enhances code readability but also provides a clear overview of the props being used.

// ❌ Not-so-good
const MyComponent = (props) => {
  const { prop1, prop2 } = props;
  // ...
};

// ✅ BETTER
const MyComponent = ({ prop1, prop2 }) => {
  // ...
};

By destructuring props in the function parameters, you make the code more concise and immediately highlight the props utilized within the component. 🔍