Most Common React Mistakes & How To Fix Them

React isn’t just a trend; it’s a powerhouse with undeniable flexibility and robust features that have captivated developers worldwide. In fact, since its inception, React has skyrocketed to become the go-to library for front-end development, with a whopping 70% of developers expressing a preference for it.

However, even the most experienced coders can sometimes stumble into common traps. DAt 42Works, we’re passionate about helping React development agencies and developers build exceptional user interfaces. This article explores some of the most common mistakes when using React, React Hooks, state management, and component rendering. Understanding these and their solutions can significantly improve your application’s performance, maintainability, and overall user experience – a crucial advantage for any React development agency.

Setting Incorrect Value Types For The Initial State

A common mistake is initializing an object or array to null or an empty string. This often results in errors when trying to access properties during rendering. Likewise, failing to set default values for nested objects can lead to similar problems.

Let’s consider a UserProfile component built by a React development agency. It fetches user data from an API and displays a greeting with the user’s name. Here’s the (potentially problematic) code:


import { useEffect, useState } from "react";

export function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/profile").then((data) => setUser(data));
  }, []);

  return (


Welcome, {user.name}



}

Trying to render this component might result in a “Cannot read property ‘name’ of null” error. This occurs because the component attempts to access the name property before the data is fetched.

Solutions and Best Practices

There are two main approaches to address this:

Setting Default State Values:

A straightforward solution is to provide default values for the state during initialization. In our example:


export function UserProfile() {
  const [user, setUser] = useState({ name: "" });
  // ... rest of the code ...

This ensures the state reflects the expected structure even before data arrives, preventing errors. However, this might not be ideal for complex objects.

Conditional Rendering and Loading States:

For intricate objects, consider postponing rendering until the data is fetched. A React development agency can implement this by initializing the component with a “loading” state and displaying a loader while the data is retrieved. Here’s an example:


import { useEffect, useState } from "react";

export function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // ... rest of the code with data fetching and error handling ...

  if (isLoading) {
    return
Loading...
  }
return (Welcome, {user?.name}
// Optional chaining for safety

  );
}

This approach ensures a smooth user experience by avoiding errors and displaying a clear loading indicator. Additionally, the optional chaining operator (?.) helps prevent errors if the fetched data is null.

(i)

Looking for inspiration? In our previous blog post, we explored some of the most popular and innovative websites built with React.

Accidentally Changing State Directly

React’s state is immutable, meaning it should not be directly modified. Instead, updates are handled through the setter function provided by the useState hook. This ensures predictable behavior and simplifies reasoning about how state changes affect your components.

Working with Simple Arrays

Let’s revisit the TodoList component example:


const TodoList = () => {
  const [items, setItems] = useState([]);

  const onItemAdd = (item) => {
    items.push(item); // Incorrect approach (mutation)
    setItems(items);
  };

  // ... rest of the component ...
};

In this original code, onItemAdd attempts to mutate the items array directly using push. However, React won’t recognize this change because the reference to the items array remains the same. To fix this, we need to create a new array instance with the updated content:


const onItemAdd = (item) => {
  setItems([...items, item]);
};

The spread operator (…) creates a new array that includes the existing items and the new item. This approach ensures proper state updates and component re-render

Immutable Updating of Object Arrays

Things get slightly more complex when dealing with arrays of objects. Consider updating a checkbox’s checked state within an object:


const updateItemList = (event, index) => {
  itemList[index].checked = event.target.checked;
  setItemList(itemList); // Incorrect (mutation)
};

This code directly modifies the object at a specific index, but again, React won’t detect the change. Here’s how to create a new array with the updated object:


const updateItemList = (event, index) => {
  const newList = [...itemList];
  newList[index].checked = event.target.checked;
  setItemList(newList);
};

This approach creates a new array (newList) and modifies the object at the desired index. However, a shallow copy is created – changes to nested objects within newList would also affect the original itemList.

To achieve true immutability for nested objects, you can utilize the map method and object spread syntax:


const updateFeaturesList = (event, index) => {
  const newFeatures = features.map((feature, idx) => {
    if (idx === index) {
      return { ...feature, checked: event.target.checked };
    }
    return { ...feature };
  });
  setListFeatures(newFeatures);
};

This approach iterates through the features array using map, creating a new array (newFeatures) with updated object copies at the desired index.

Alternatively, modern browsers support the structuredClone API for deep copying:


const updateItemList = (event, index) => {
  const newList = structuredClone(itemList);
  newList[index].checked = event.target.checked;
  setItemList(newList);
};

While both methods achieve immutability, they might not be ideal for large datasets due to performance considerations. In such cases, consider specialized libraries like Immer.js for efficient immutable data manipulation.

Pass by Value vs. Pass by Reference

Understanding how JavaScript handles values is crucial for optimizing React components. While terms like “pass by reference” are sometimes used, JavaScript actually performs pass-by-value. When passing objects to functions, a copy of the object’s memory address (reference) is passed. This allows functions to modify the object’s properties, but not the reference itself.

This concept is particularly relevant in React because it relies on “same-value equality” for state and prop updates. React compares memory addresses to determine if a re-render is necessary. Therefore, adopting immutable data practices (creating new objects/arrays for updates) is essential to avoid unintended side effects and unnecessary re-renders.

By following these best practices for state management and value passing, React development agencies and developers can build robust, performant, and maintainable React applications. 42Works is here to empower your React development journey with expert guidance and solutions.

Forgetting That State Updates are Asynchronous

One common pitfall involves attempting to access a state value immediately after setting it. This is because state updates in React are asynchronous – the new value isn’t reflected immediately. Consider this example:


import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
    console.log(count); // This will still log 0
  };
}

Here, the console.log statement might print 0 even though the state update has been triggered. React typically performs state updates during the next available render or batches them for optimization. Therefore, accessing the state right after setting it might not reflect the latest update.

Approaches for Handling Asynchronous State Updates

In class-based components, you can use the second argument to setState, a callback function executed after the state update. However, hooks work differently. While using useEffect to access the updated state was previously recommended, React 18 emphasizes reducing unnecessary useEffect calls.

The preferred approach in this scenario is to perform the calculation directly within the event handler:


import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
    console.log(count + 1); // Log the incremented value here
  };
}

Remember, state updates are not asynchronous in a way that returns a promise. Using async/await or .then won’t work and is another common mistake to avoid.

Using the Current State Value Incorrectly to Calculate the Next State

Another related issue arises when incorrectly relying on the current state value to calculate the next state. Consider this code:


const [count, setCount] = useState(0);
const incrementTwice = () => {
  setCount(count + 1);
  setCount(count + 1);
};

You might expect the final count value to be 2. However, it will be 1. React batches state updates to optimize performance. In this example, both setCount calls happen with the current count value of 0, resulting in a final value of 1.

Ensuring Accurate State Updates

To address this, use the updater function provided within setCount:


const [count, setCount] = useState(0);
const increment = () => {
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
};

The updater function receives the previous state value, allowing you to calculate the new state based on the latest value. This approach ensures accurate state updates even with batched operations. Refer to the official React documentation for a deeper explanation.

Including Complex Objects In Hook Dependency Arrays

Another common mistake involves including non-primitive values (objects, arrays) directly in the dependency array of a hook like useCallback or useMemo. Let’s look at an example:


function FeatureList() {
  const defaultFeatures = ["feature1", "feature2"];
  const isDefault = useCallback(
    (feature) => defaultFeatures.includes(feature),
    [defaultFeatures],
  );
}

The intention here is to memoize the isDefault function using useCallback to prevent unnecessary re-computations. However, there’s a problem.

In React, when you include an array in a dependency array, it only stores the object reference (memory address). It compares this reference with the previous reference to determine if the array has changed. Since the defaultFeatures array is recreated on every render within the component, its reference will also be new each time. This leads to the isDefault function being re-computed even though the array content remains the same.

Addressing Dependency Array Issues

Here are two approaches to fix this:

Wrap the Array in useMemo:
```
const defaultFeatures = useMemo(() => ["feature1", "feature2"], []);
}
```
This approach ensures that the defaultFeatures array is created only once and stored in a reference that React can track for changes. However, this can lead to dependency management complexity, especially if defaultFeatures itself depends on other variables.
Move Variable Declaration Outside the Component::
```
const defaultFeatures = ["feature1", "feature2"];
function FeatureList() {
  const isDefault = useCallback(
    (feature) => defaultFeatures.includes(feature),
    [],
  );
}
}
```
This is often the preferred solution. By declaring defaultFeatures outside the component, it’s not recreated on every render, and the reference remains consistent, allowing React to optimize the isDefault function’s usage.

Overusing useMemo and useCallback

While useCallback and useMemo are valuable for performance optimization, excessive use can be counterproductive. Wrapping every function or variable with these hooks can introduce unnecessary overhead and potentially decrease performance.

Here’s a guideline for using these hooks effectively:

useCallback: Use it to memoize functions that are passed down as props to child components. This prevents unnecessary re-renders in child components when the parent component re-renders.
useMemo:Use it to cache expensive computations or derived data that doesn’t change frequently within a component.

Avoid using these hooks for trivial functions or values, as the overhead of memoization might outweigh any benefits.

Creating Individual onChange Handlers for Each Input

Building forms in React often involves managing user input through the onChange event. A common pitfall is creating separate onChange handlers for each input field. This can lead to cluttered code, especially in complex forms with numerous inputs.

Consider the following example of a ProfileForm component:


function ProfileForm() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
  });
  const onFirstNameChange = (event) => {
    setFormData({ ...formData, firstName: event.target.value });
  };
  const onLastNameChange = (event) => {
    setFormData({ ...formData, lastName: event.target.value });
  };

  const onEmailChange = (event) => {
    setFormData({ ...formData, email: event.target.value });
  };
  // ... rest of the component
}
}

As you can see, each onChange handler is very similar, with the only difference being the field name. There are ways to optimize this approach:

Curried Function with Field Name:
We can create a curried function that accepts the field name and returns a function to handle the onChange event. This reduces code duplication but still requires passing the field name as an argument.
```
const onInputChange = (name) => (event) => {
  setFormData({ ...formData, [name]: event.target.value });
};
// ...
```
Single Handler with Destructuring:
A more efficient approach is to utilize a single onChange handler that extracts the name and value properties directly from the event object using destructuring:
```
function ProfileForm() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
     email: "",
  });
  const onInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };
  // ... rest of the component
}
```
This approach keeps the code clean and concise by managing all input changes with a single handler. You can use the name attribute or any other unique identifier assigned to your input elements.

Unnecessarily using useEffect

With the introduction of concurrent rendering in React 18, using the useEffect hook effectively becomes even more critical. Excessive or unnecessary usage of useEffect can lead to performance issues, unintended side effects, and debugging challenges.

When to Use useEffect

Reserve useEffect for side effects that impact the outside world:

Fetching data from servers
Subscribing to events (timers, websockets)
Manipulating the DOM directly (rarely needed)

These side effects are often asynchronous and occur at unpredictable times, necessitating management within our components.

Alternatives to useEffect

For side effects that influence only the component’s internal state or don’t affect external factors, consider alternatives to useEffect:

Update state directly within the component: If a side effect updates the component’s state based on props or previous state, you can handle it directly within the component logic.
Use derived state logic: The useState hook allows defining derived state values based on other state values. This can eliminate the need for useEffect in some scenarios.

The updated React documentation offers a detailed guide on situations where useEffect might not be necessary and suggests alternative approaches.

Conclusion

React empowers you to build robust, performant, and maintainable web applications. However, mastering React requires understanding its nuances and best practices. Avoiding the common mistakes discussed in this article will ensure an efficient, reliable, and maintainable React codebase.

Embrace Continuous Learning for React Development with 42Works

Becoming a skilled React developer involves continuous learning, practice, and refinement. Explore new concepts, experiment with approaches, and build new projects. With dedication and perseverance, you can master React and create applications that delight users and solve real-world problems.

42Works is here to empower your React development journey with expert guidance and solutions. Let us help you navigate the ever-evolving React landscape and build exceptional applications. Contact us now!

References and resources;

FAQs

What are some best practices for structuring large React applications?

There are several best practices for structuring large React applications, including:

Component Organization: Break down your application into smaller, reusable components.
State Management: Consider using a state management library like Redux or Zustand for complex applications.
Code Splitting: Split your codebase into smaller bundles to improve initial load times.

For more in-depth discussions on these topics, explore our related blog posts.

What famous websites are built with React?

React is a popular choice for building modern web applications. Some well-known websites built with React include:

Facebook
Instagram
Netflix
Airbnb
WhatsApp Web
Dropbox
Uber Eats
Khan Academy
The New York Times

Can I use a class component instead of a functional component with hooks?

Yes, you can! Both class components and functional components with hooks are valid approaches for building React applications. However, functional components with hooks are generally considered the preferred approach for modern React development due to their simplicity and maintainability.

Where can I find more resources to learn React?

The official React documentation is a great starting point: https://react.dev/

The React community is also very active and there are many online resources available, including tutorials, articles, and video courses.

Incorporate Expertise from React Development Agencies and Developers

Building exceptional React applications requires not only knowledge of the core concepts but also an understanding of best practices and the ability to solve complex problems. Partnering with a skilled React development agency or working with experienced React developers can provide valuable guidance and expertise throughout the development process.

42Works: Your Trusted Partner in React Development

At 42Works, we are a team of passionate React developers who are here to help you build phenomenal web applications. We offer a range of services, including:

React development for web applications and mobile apps
Custom React component development
React integration with back-end technologies
Performance optimization for React applications

Let us help you navigate the ever-evolving React landscape and empower your development journey. Contact us today for a consultation!

BLOG