Common React JS Mistakes and How to Avoid

React JS is a powerful and flexible JavaScript library that allows developers to create interactive UIs effortlessly. While its simplicity is often praised, new and experienced developers alike can fall into certain traps that affect performance, maintainability, and scalability. In this post, we’ll walk through some of the most common mistakes developers make in React and how to avoid them for smoother development.

1. Ignoring Key Props in Lists

When rendering lists in React, each item should have a unique key prop. The key prop helps React identify which items have changed, been added, or been removed, improving the performance of rendering lists. Without key, React cannot optimize rendering, leading to unnecessary re-renders.

Mistake Example:

const items = ['Apple', 'Banana', 'Cherry'];
return (
  <ul>
    {items.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
);

Why It’s Wrong:
Without a key prop, React will inefficiently re-render the entire list whenever an item is added, removed, or changed.

Solution:
Add a unique key for each list item, typically using an ID or a stable identifier.

const items = ['Apple', 'Banana', 'Cherry'];
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

2. Overusing Inline Functions

In React, it’s common to define inline functions directly in JSX. However, creating new functions on each render can lead to performance issues because React sees the function as a new reference and re-renders the component unnecessarily.

Mistake Example:

<button onClick={() => handleClick(item)}>Click me</button>

Why It’s Wrong:
Each time the component re-renders, a new instance of the inline function is created. This can cause child components to re-render even when they don’t need to, impacting performance.

Solution:
Move the function outside of JSX and use useCallback to memoize it if necessary.

const handleClick = useCallback((item) => {
  // handle click
}, [item]);

<button onClick={handleClick}>Click me</button>

3. Not Using useEffect Dependencies Properly

useEffect is a powerful hook that handles side effects in React, but forgetting to include dependencies or adding unnecessary ones can lead to bugs, infinite loops, or unintentional behavior.

Mistake Example:

useEffect(() => {
  fetchData();
});

Why It’s Wrong:
Without specifying dependencies, this effect runs on every render, which can cause excessive API calls or other unwanted behavior.

Solution:
Specify a proper dependency array to control when the effect runs.

useEffect(() => {
  fetchData();
}, []); // only runs once on mount

For effects that need to run when certain variables change, ensure those variables are included in the dependency array.

useEffect(() => {
  fetchData();
}, [data]);

4. Mutating State Directly

React state should be treated as immutable. Mutating state directly can cause unexpected behavior since React uses shallow comparisons to detect changes. If you mutate the state directly, React won’t realize the state has changed and won’t re-render the component as expected.

Mistake Example:

const [items, setItems] = useState([1, 2, 3]);

const addItem = (newItem) => {
  items.push(newItem); // Direct mutation
  setItems(items); // Won't trigger a re-render
};

Why It’s Wrong:
Directly mutating the items array means React does not recognize that the state has changed, so the component will not re-render.

Solution:
Instead of mutating state directly, return a new copy of the state.

const addItem = (newItem) => {
  setItems([...items, newItem]); // Create a new array
};

5. Forgetting to Clean Up useEffect

When side effects involve subscriptions, timeouts, or other resources, it’s important to clean them up when the component unmounts. Failing to clean up side effects can lead to memory leaks and unwanted behavior.

Mistake Example:

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
});

Why It’s Wrong:
This effect does not clean up the interval when the component unmounts, which can lead to memory leaks.

Solution:
Return a cleanup function from useEffect to clear any side effects.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(timer); // Cleanup
}, []);

6. Overcomplicating Component Structure

While it’s tempting to add more logic and functionality to a single component, large, complex components are harder to maintain and test. Overly complex components also make it difficult to debug and modify code.

Mistake Example:
A component handling fetching data, rendering UI, and managing local state.

Why It’s Wrong:
This violates the principle of separation of concerns, making the component hard to read and maintain.

Solution:
Split the component into smaller, more manageable pieces. Keep logic separate by using custom hooks for data fetching, and break down the UI into smaller, reusable components.

const useFetchData = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataComponent = () => {
  const data = useFetchData('/api/data');

  return <div>{data ? data.name : 'Loading...'}</div>;
};

7. Ignoring Performance Optimization Techniques

As your React application grows, so does the need to optimize performance. Neglecting optimization can lead to sluggish UIs, especially in larger apps.

Common Mistakes:

• Not memoizing components using React.memo.
• Not using useMemo for computationally expensive calculations.
• Passing new objects or arrays as props unnecessarily.

Solution:
Apply performance optimization techniques such as React.memo to prevent unnecessary re-renders, and use useMemo and useCallback to optimize computations and functions.

const ExpensiveComponent = React.memo(({ data }) => {
  const computedValue = useMemo(() => expensiveCalculation(data), [data]);

  return <div>{computedValue}</div>;
});

Conclusion

Avoiding these common mistakes in React can significantly improve the performance, readability, and maintainability of your code. By applying best practices like proper use of key props, managing state immutably, and optimizing your component structure, you can ensure smooth development and a more scalable application. Take time to refactor your code, stay aware of how React handles updates, and continue learning about React’s best practices for long-term success.