5 Common Mistakes When Starting with React (And How to Avoid Them)

Learn about the most frequent mistakes we make when starting with React and discover current best practices for developing modern applications
6 min read
When starting with a new technology, especially with a powerful framework like React, making mistakes is part of the learning process. Even with React’s comprehensive documentation, there are certain practices we only learn through experience.
Today, I want to share the 5 most common mistakes we tend to make when starting with React and, more importantly, how to avoid them using current best practices.
1. Using Create React App (CRA)
For a long time, Create React App was the default tool for starting React projects. Its “zero-configuration” promise made it very attractive for beginners. However, today we have better alternatives.
The modern solution: Using Vite + SWC
npm create vite
# Select React and JavaScript/TypeScript + SWC
cd my-project
npm i && npm run dev
Vite offers a much faster development experience and more flexible configuration than CRA. Additionally, using SWC (Speedy Web Compiler) instead of Babel, we get significantly faster code transformations.
2. Using defaultProps
Although defaultProps
was the standard way to handle default prop values for a long time, we now have a more elegant solution using modern JavaScript features.
❌ Old way:
function Card(props) {
return <div>{props.title}</div>
}
Card.defaultProps = {
title: 'Default title'
}
✅ Modern way:
function Card({title = "Default title"}) {
return <div>{title}</div>
}
3. Relying on PropTypes
PropTypes was React’s initial solution for typing. However, TypeScript has become the industry standard for handling types in JavaScript.
❌ Using PropTypes:
import { PropTypes } from "prop-types";
function Card(props) {
return <div>{props.title}</div>
}
Card.propTypes = {
title: PropTypes.string.isRequired
};
✅ Using TypeScript:
interface CardProps {
title: string;
}
function Card({title}: CardProps) {
return <div>{title}</div>
}
4. Writing Class Components
Class components were the primary way to create stateful components in React. With the introduction of Hooks, functional components have become the preferred choice.
❌ Class component:
class Card extends React.Component {
render() {
return <div>{this.props.title}</div>
}
}
✅ Functional component with Hooks:
function Card({title}) {
const [count, setCount] = useState(0);
return <div>{title}</div>
}
5. Unnecessarily Importing React
Since React 17, it’s no longer necessary to import React in every file that uses JSX.
❌ Before React 17:
import React from 'react';
function Card() {
return <div>Card</div>
}
✅ Now:
function Card() {
return <div>Card</div>
}
// Only import React when using hooks or other specific features
import { useState } from 'react';
Conclusion
React’s evolution has brought better practices and more efficient tools. Staying updated with these practices will not only improve our code quality but also allow us to take full advantage of React’s modern capabilities.
Remember that these “mistakes” aren’t really critical errors - the code will still work. However, adopting new practices will help us write more maintainable, efficient code that aligns with current React community standards.
The key is not to feel overwhelmed by these changes but to gradually incorporate them into our development workflow. As our applications grow in complexity, these modern practices will prove increasingly valuable in maintaining clean, performant React applications.