React Common Errors

React Common Errors : Deep Guide with Fixes

1. JSX: “Objects are not valid as a React child”

React can only render strings, numbers, and elements in JSX. If you pass an object or array of objects directly, React doesn’t know what to do.

1const user = { name: "Milan" };
2return <div>{user}</div>; // ❌

✅ Fix:

Extract a valid value:

1return <div>{user.name}</div>;

2. Hooks: “Invalid hook call. Hooks can only be called inside the body of a function component.”

Hooks must be used:

• In React function components or custom hooks
• At the top level—not inside if, for, or nested functions

1if (isLoggedIn) {
2  useEffect(() => {}); // ❌
3}

✅ Fix:

1useEffect(() => {
2  if (isLoggedIn) {
3    // do something
4  }
5}, [isLoggedIn]);

3. Too Many Re-renders

Calling setState inside render or without control leads to infinite loops.

1const [count, setCount] = useState(0);
2setCount(count + 1); // triggers rerender → triggers setState again

✅ Fix:

Use event or useEffect:

1useEffect(() => {
2  if (count === 0) setCount(1);
3}, []);

4. “Each child in a list should have a unique ‘key’ prop”

React uses key to identify which items changed. Without a unique key, diffing becomes inefficient and buggy.

1items.map(item => <li>{item.title}</li>)

✅ Fix:

1items.map(item => <li key={item.id}>{item.title}</li>)

5. useEffect Dependency Mistakes

useEffect re-runs based on its dependency array. Omitting dependencies can cause stale data; over-including causes performance issues or loops.

1useEffect(() => {
2  fetchData(); // fetchData comes from props but not included in deps
3}, []);

✅ Fix:

Use full deps or wrap in useCallback.

6. Controlled vs Uncontrolled Input Warning

React forms must be either fully controlled (with value) or uncontrolled (with defaultValue). Mixing both causes React confusion.

1<input value={name} defaultValue="John" />

✅ Fix:

Use only one:

1<input value={name} onChange={e => setName(e.target.value)} />

7. React 18+ Suspense/use() Errors (React 19)

React 19 introduces the use() hook for async data directly in components (with full Suspense support). Improper usage leads to runtime errors.

1const data = use(fetch("/api")); // ❌ will throw if not wrapped in <Suspense>

✅ Fix:

1<Suspense fallback={<Loading />}>
2  <DataComponent />
3</Suspense>

Inside DataComponent:

1const result = use(myPromise); // ✅

8. Component Not Updating After State Change

React state updates must be immutable. Direct mutation won’t trigger re-renders.

1state.list.push("new"); // ❌
2setState(state);

✅ Fix:

1setState(prev => [...prev.list, "new"]);

9. Context Not Working as Expected

useContext only reads values provided above in the tree. Misplacement or improper wrapping leads to undefined values.

1<Component /> // no <MyProvider> above

✅ Fix:

1<MyContext.Provider value={...}>
2  <Component />
3</MyContext.Provider>

10. “Invalid hook call”

🔍 Why it Happens:

You're using a hook:

• Outside a functional component
• Inside a loop or condition

✅ Solution:

• Only use hooks at the top level of your function components.
• Never call hooks inside conditions or loops.

1// ✅ Good
2function Component() {
3  const [count, setCount] = useState(0);
4}
5
6// ❌ Bad
7if (condition) {
8  useState(0);
9}

🛠 Final Tips for Debugging React Errors

• Use React DevTools for inspecting component state and props.
• Console log your data before rendering to avoid undefined issues.
• Break your components into smaller parts to isolate issues.
• Use TypeScript to catch many of these errors early with type safety.