I’ve been developing React applications for a few years now and I’ve been through countless mistakes that slow down the development of your projects.
React is one of the most popular libraries for building dynamic user interfaces, but its flexibility can also lead to certain common mistakes for the new developers.
This guide covers the top mistakes developers can make in React and provides actionable tips to write better, more efficient code.
Let's dive in!
1. Mutating State
Before continuing, let's write our React component first that is supposed to display a list of items, as well as adding or removing one:
import { useState } from "react";
const Home = (props) => {
const [items, setItems] = useState(['item1', 'item2']);
const [itemToAdd, setItemToAdd] = useState('');
function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
function removeItem(item) {
const itemIndex = items.indexOf(item);
if (itemIndex !== -1) {
const newArray = [...items];
newArray.splice(itemIndex, 1);
setItems(newArray);
}
}
return (
<div style={{ padding: '3rem', maxWidth: '12rem' }}>
<div>
{items.map((item, key) => (
<div key={key} style={{ marginTop: '0.5rem', display: 'flex', justifyContent: 'space-between' }}>
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
</div>
<div style={{ marginTop: '1rem' }}>
<input value={itemToAdd} onChange={event => setItemToAdd(event.target.value)} />
<button onClick={() => wrongHandleAddItem(itemToAdd)} style={{ marginLeft: '1rem' }}>+</button>
</div>
</div>
)
}
export default Home;
Here, I wrote two different methods to add an item in the items state array. Let's break it down together:
function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
The first thing this method does is calling the push array function aiming to add an elemen to an array.
The second thing is calling setItems to apply the changes to the state variable.
However, if you try running this code, it won't work ❌
This code is violating a very important React rule: mutating the state.
React relies on an state variable's identity to tell when the state has changed. When we push an item into an array, we aren't changing that array's identity, and so React can't tell that the value has changed and re-render the array.
Here is how to fix it ✅ :
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
In this method, I created a new array using the spread operator ... allowing to instantiate the new array with the content of items. The second parameter is used to add the new content (here item).
The last step is to call the setItems method to validate the new state of the variable items ✅
2. Not generating key in Lists
Every React developer has probably seen this error at least once during their development journey.
The most common way for this to happen is when mapping over data. Here's an example of this violation:
items.map((item) => (
<div>
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
When we want to render an array of elements, we need to give React a bit more context to allow it to identify each item. In the best possible world, it has to be a uniquer identifier.
Here is a quick way to fix this, but that is not optimal:
items.map((item, index) => (
<div key={index} >
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
As you'll gain experience in React and understand how it works better, you'll be able to tell whether it's fine or not based on your case.
To make it perfect, you can use a uuid generator such as crypto.randomUUID() and store it into your items list as object as follows:
const newItemToAdd = {
id: crypto.randomUUID(),
value: item
};
const newArray = [...items, newItemToAdd];
setItems(newItems);
and use it as follows during the render:
items.map((item, index) => (
<div key={item.id} >
{item.value}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
Now things are perfect ✅
3. Using async in useEffect
Let's suppose we have a function which needs to fetch some data from an API on mount. We'll use the useEffect hook, and we want to use the await keyword.
Let's check the first try:
As you may know, the await keyword needs to be in a function marked with the async keyword:
useEffect(async () => {
const url = "/api/to/fetch";
const res = await fetch(url);
const json = res.json();
return(json);
}, []);
Unfortunately, this doesn't work and we get this error message:
destroy is not a function
Here is the fix: create a separate async function within the useEffect hook ✅
useEffect(() => {
async function fetchData() {
const url = "/api/to/fetch";
const res = await fetch(url);
const json = res.json();
return json;
}
fetchData();
}, []);
It's important to understand what the async keyword implies:
It doesn't return the object json, it returns a Promise that resolves the object json.
This is actually a problem, as useEffect isn't supposed to return a Promise. It expects us to return either nothing (like we are above), or a cleanup function. Cleanup functions are important, out of the scope of this guide, but here is out to use it:
useEffect(() => {
async function fetchData() {
const url = "/api/to/fetch";
const res = await fetch(url);
const json = res.json();
return json;
}
fetchData();
return () => {
// Cleanup logic here
}
}, []);
4. Accessing state before re-render
Let's go back to state management for one more interesting mistake new developers make very often. This will help us understanding React state even better.
Let's take our goodHandleAddItem method to illustrate this:
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
console.log(items);
}
When running this code, we can see that the console does not log the result we expect.
Here is the problem: the setter function of a state variable is asynchronous.
When we call the setItems method, we are actually scheduling an update, and not assigning a variable.
Here is the fix: we already know what the content of the variable should be with the newArray variable. Which means that to use the data we want supposedly to be the content of the items variable, we need to use the variable newArray instead even after the setItems ✅
5. Using stale State data
The last one will also be about React state management, you'll become a pro after this guide! 🚀
A common pitfall when using React Hooks is the misuse of stale state data. This can occur when we directly reference the state variable in consecutive state updates. As we saw in the previous error, state updates may be asynchronous, it means that the state variable might not reflect the latest value when it’s referenced in successive calls.
Let's use a brand new example to make things clearer, the well-known counter:
const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1);
The usage above is incorrect. In fact, count is referenced directly within the setCount call. In event handlers and lifecycle methods, state updates can be batched and will both use the same initial value as count, which will lead to an incorrect final state.
There is another form of setCount that we can use to make things work: the updater function. The updater function takes the previous state as an argument and returns the new state, so each consecutive update will have the correct value, preventing unwanted behaviors.
Here is how to use it:
setCount((previousValue) => previousValue + 1);
setCount((previousValue) => previousValue + 1);
Logging the content of count now indicates the correct value ✅
Conclusion
Avoiding these common mistakes will make you develop more performant React applications and master the state management!
I hope this guide helped you and wish you a happy coding time!
Leave a like if you enjoyed this guide, as a new or confirmed React developer 🚀
See you soon!
Top comments (0)