Common React Errors and Solutions

Introduction

React errors are very common for beginners as well as experienced developers. Understanding these errors helps developers debug applications faster and write cleaner code.

In this tutorial, we will learn about the most common React errors, their causes, and how to fix them with examples.

Why React Errors Happen?

React errors usually occur because:

  • JavaScript syntax mistakes
  • Wrong component structure
  • Missing dependencies
  • Incorrect Hook usage
  • State updates during rendering
  • Improper imports/exports

You will see some common React Errors.

1. JSX Must Have One Parent Element

Error

Adjacent JSX elements must be wrapped in an enclosing tag

Wrong Example


function App() {
 return (
   <h1>Hello</h1>
   <p>React</p>
 );

Why This Error Happens?

React components must return a single parent element.

Correct Example


function App() {
 return (
   <div>
     <h1>Hello</h1>
     <p>React</p>
   </div>
 );
}

Alternative Using Fragment


function App() {
 return (
   <>
     <h1>Hello</h1>
     <p>React</p>
   </>
 );
}

2. Component Name Must Start with a Capital Letter

Wrong Example


function app() {
 return 
Hello
;
}

Why This Error Happens?

React treats lowercase names as HTML tags.

Correct Example


function App() {
  return <h1>Hello</h1>;
}

3. Cannot Read Property of Undefined

Error

Cannot read properties of undefined

Wrong Example


const user = undefined;

console.log(user.name);

Why This Error Happens?

Trying to access properties from:

  • undefined
  • null

Correct Example


console.log(user?.name);

Using Optional Chaining

Optional chaining prevents application crashes.

4. useEffect Infinite Loop

Wrong Example


useEffect(() => {
 setCount(count + 1);
});

Why This Error Happens?

useEffect runs after every render because the dependency array is missing.

Correct Example


useEffect(() => {
 setCount(count + 1);
}, []);

5. Too Many Re-renders

Error

Too many re-renders

Wrong Example


function App() {
 const [count, setCount] = useState(0);
 setCount(count + 1);
 return 
{count}
;
}

Why This Error Happens?

State updates inside component rendering create infinite loops.


<button
 onClick={() => setCount(count + 1)}
>
 Increase
</button>

6. Hooks Can Only Be Called Inside Functional Components

Error

Hooks can only be called inside functional components.

Wrong Example


function test() {
 useState(0);
}

Why This Error Happens?

Hooks only work:

  • Inside React components
  • Inside Custom Hooks

Correct Example


function App() {
 const [count, setCount] = useState(0);
 return <h1>{count}</h1>;
}

7. Missing Key Prop in List

Error

Each child in a list should have a unique key prop

Wrong Example


{users.map((user) => (
<p>{user.name}</p>
))}

Why This Error Happens?

React needs unique keys for list items.

Correct Example


{users.map((user) => (
 <p>
   {user.name}
 </p>
))}

8. Objects Are Not Valid as React Child

Error

Objects are not valid as a React child

Wrong Example


const user = {
 name: "John"
};
return <h1>{user}</h1>;

Why This Error Happens?

React cannot directly render objects.

Correct Example


return <h1>{user.name}</h1>;

9. Module Not Found Error

Error

Module not found

Common Causes

  • Incorrect import path
  • Missing package
  • Wrong filename

Wrong Example


import Header from "./header";

Correct Example


import Header from "./Header";

10. Failed to Compile

Common Reasons

  • Syntax errors
  • Missing brackets
  • Missing imports
  • Typo mistakes

Example


return (
 <div>
);
Missing closing tag.

Correct Example


return (
 <div><div>
);

11. State Updates Are Asynchronous

Wrong Example


setCount(count + 1);

console.log(count);

Why This Confuses Developers?

State updates do not happen immediately.

Better Approach


useEffect(() => {
 console.log(count);
}, [count]);

12. Controlled vs Uncontrolled Input Warning

Error

A component is changing an uncontrolled input to be controlled

Wrong Example


const [name, setName] = useState();

Correct Example


const [name, setName] = useState("");

13. Memory Leak Warning

Example


useEffect(() => {
 setInterval(() => {
 }, 1000);
}, []);

Why This Error Happens?

Timer continues even after component unmounts.

Correct Example


useEffect(() => {
 const timer = setInterval(() => {
 }, 1000);
 return () => {
   clearInterval(timer);
 };
}, []);

14. API Fetch Errors

Common Issues

  • Wrong API URL
  • Network issues
  • CORS errors

Example


fetch("wrong-url");

Solution

Always:

  • Validate URL
  • Use try-catch
  • Handle loading states

15. CORS Error

Error

Blocked by CORS policy

Why This Happens?

Server blocks requests from different origins.

Solutions

  • Enable CORS on backend
  • Use proxy server
  • Use proper API configuration

16. React Router Page Not Found

Common Reasons

  • Wrong route path
  • Missing Route component
  • Incorrect Link path

Wrong Example


<Route path="/about" />

without element prop.

Correct Example


<Route
  path="/about"
 element={<About />}
/>

17. Invalid Hook Call Warning

Causes

  • Multiple React versions
  • Breaking Hook rules
  • Using Hooks outside components

Solution

  • Follow Hook rules
  • Check package versions

18. White Screen in React App

Common Reasons

  • JavaScript runtime error
  • Incorrect imports
  • Syntax issues

How to Debug?

Check:

  • Browser console
  • Terminal errors
  • Network requests

19. Event Handler Not Working

Wrong Example


<button onClick="handleClick()">

Correct Example


<button onClick={handleClick}>

20. setState on Unmounted Component

Why This Happens?

Async operations finish after component unmounts.

Solution

Use cleanup functions.

Common React Error Categories

Category Example
JSX Errors Missing parent element
Hook Errors Invalid Hook call
State Errors Infinite re-render
API Errors Failed fetch
Routing Errors Page not found
Import Errors Module not found

Tips for Debugging React Errors

Read Error Messages Carefully

React error messages are usually descriptive.

Use Browser Console

Check detailed stack traces.

Use React Developer Tools

Helpful for component debugging.

Debug Step by Step

Check:

  • State
  • Props
  • API data
  • Imports

Use ESLint

ESLint catches common mistakes early.

Best Practices to Avoid React Errors

Use Functional Components

Modern and cleaner approach.

Follow Hook Rules

Never call Hooks conditionally.

Use Optional Chaining

Avoid undefined errors.

Add Dependency Arrays Properly

Prevents infinite rendering.

Keep Components Small

Smaller components are easier to debug.

Use Type Checking

Use:

  • PropTypes
  • TypeScript

Real-Life Example

Suppose an API returns data slowly.

Without checking:


<h1>{user.name}</h1>

App crashes if user is undefined

Better approach:


<h1>{user?.name}</h1>

Most Important React Errors for Beginners

Beginners commonly face:

  • Missing key prop
  • Infinite useEffect loop
  • JSX syntax issues
  • Incorrect imports
  • Undefined state errors

Understanding these errors improves React skills significantly.

Conclusion

React errors are a normal part of development. Every React developer faces errors while building applications.

In this tutorial, we covered:

  • JSX errors
  • Hook errors
  • State errors
  • API errors
  • Routing errors
  • Import/export issues

Continue Learning React