Introduction
I’ve been working with React since 2020, and over the years, I’ve had countless discussions with colleagues about what makes a React app well-structured and easier to maintain. Based on those conversations and my own experience, I’ve decided to put together a series of articles around React design principles and best practices.
This first one is all about React Components which is the heart of every React application.
The aim here is not to hand over „absolute rules“ but rather to share practical advice that will help you write cleaner, more scalable code.
This is not an article for complete beginners. I’ll assume you already know the basics of React. If you’re still brushing up on fundamentals, I’d recommend doing that first and then coming back here.
One important thing: don’t blindly follow advice you find on the internet (including this). Software can be built in many ways. Treat these principles as suggestions and adapt them according to your project’s needs.
In this article, we’ll cover topics like:
- Function vs. Class Components
- Naming components properly
- Helper functions
- Managing repetitive markup
- Component size and length
- Props management
- Ternary operators
- List rendering
- Hooks vs HOCs and render props
- Writing custom hooks
- Render functions
- Error boundaries
- Suspense
Let’s dive in.
1. Prefer Function Components over Class Components
Class components are bulky, harder to maintain, and require you to remember lifecycle methods, state handling, and a lot of boilerplate. Function components, on the other hand, are straightforward, easier to read, and give you a cleaner mental model.
The only case where class components still make sense is Error Boundaries.
❌ Example with Class Component:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment() {
this.setState(state => ({ count: state.count + 1 }));
}
render() {
return (
<div>
Count: {this.state.count}
<button onClick={() => this.increment()}>Increment</button>
</div>
);
}
}
✅ Cleaner with Function Component:
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
2. Always Name Your Components
Anonymous components make debugging harder and reduce readability. If you name your components, error stack traces become easier to follow and your teammates will thank you.
❌ Anonymous export:
export default () => <div>Details</div>;
✅ Named component:
export default function UserDetails() {
return <div>User Details</div>;
}
3. Keep Helper Functions Outside Components
Placing helper functions inside a component clutters the code unnecessarily. Unless you need closure, move them outside.
❌ Helper function inside component:
function UserProfile({ user }) {
function formatDate(date) {
return date.toLocaleDateString();
}
return <div>Joined: {formatDate(user.joinDate)}</div>;
}
✅ Cleaner separation:
function formatDate(date) {
return date.toLocaleDateString();
}
function UserProfile({ user }) {
return <div>Joined: {formatDate(user.joinDate)}</div>;
}
4. Don’t Repeat Markup — Use Config Objects
Copy-pasting repetitive markup makes updates painful. Instead, use loops and config objects.
❌ Hardcoded markup:
function ProductList() {
return (
<div>
<div><h2>Product 1</h2><p>Price: $10</p></div>
<div><h2>Product 2</h2><p>Price: $20</p></div>
<div><h2>Product 3</h2><p>Price: $30</p></div>
</div>
);
}
✅ Dynamic with config:
const products = [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 },
{ id: 3, name: 'Product 3', price: 30 }
];
function ProductList() {
return (
<div>
{products.map(product => (
<div key={product.id}>
<h2>{product.name}</h2>
<p>Price: ${product.price}</p>
</div>
))}
</div>
);
}
5. Break Down Large Components
If your component does too many things, it becomes unreadable and tough to maintain. Smaller components are easier to test and debug.
❌ Huge component:
function UserProfile({ user }) {
return (
<div>
<div>
<img src={user.avatar} alt={user.name} />
<h2>{user.name}</h2>
</div>
<div>
<h3>Contact</h3>
<p>Email: {user.email}</p>
<p>Phone: {user.phone}</p>
</div>
</div>
);
}
✅ Split into smaller ones:
function UserProfile({ user }) {
return (
<div>
<ProfileHeader avatar={user.avatar} name={user.name} />
<ProfileContact email={user.email} phone={user.phone} />
</div>
);
}
6. Destructure Props
Props look much cleaner when destructured.
❌ Without destructuring:
function UserProfile(props) {
return (
<>
<div>Name: {props.name}</div>
<div>Email: {props.email}</div>
</>
);
}
✅ With destructuring:
function UserProfile({ name, email }) {
return (
<>
<div>Name: {name}</div>
<div>Email: {email}</div>
</>
);
}
7. Avoid Too Many Props
If a component has more than 5–6 props, it’s probably doing too much. Consider splitting it or grouping props into objects.
8. Group Related Props into Objects
Instead of passing multiple related values separately, bundle them into an object.
9. Avoid Complex Ternary Operators
Multiple nested ternaries are a nightmare to read. Use if statements instead.
10. Abstract List Rendering into Components
Don’t clutter your JSX with .map inside the main component. Extract it out into a smaller component.
11. Use Hooks Instead of HOCs or Render Props
HOCs and render props were useful earlier, but now Hooks offer a cleaner, simpler approach.
12. Reuse Logic with Custom Hooks
Don’t duplicate fetching or state logic across components. Write custom hooks and reuse.
13. Extract Render Functions
If you have complex rendering logic, pull it out of the main component. Either as a function or as a separate component.
14. Always Use Error Boundaries
Never let a child component crash your whole app. Wrap critical parts of your app with error boundaries.
15. Use Suspense for Async Operations
Instead of manually managing loading states everywhere, let Suspense handle it for you. It makes async UI much simpler.
Final Thoughts
These principles are not hard rules, but if you keep them in mind, your React applications will naturally become more modular, easier to scale, and a lot friendlier for your teammates.
React is flexible, so treat these as guidelines rather than commandments. Experiment, adapt, and keep refining your code style.