Types of errors in a React application

ReactJunior~3 min read

All types of errors in a React application can be split into 5 categories:

Category	Where it happens	Example
1. Render errors	while building JSX (during render)	Cannot read property 'name' of undefined
2. Effect and lifecycle errors	inside useEffect, useLayoutEffect, componentDidMount, etc.	an error calling an API, accessing an unmounted element
3. Errors in events and callbacks	on clicks, submits, inputs, etc.	onClick calls a function that throws
4. Asynchronous errors	in fetch, setTimeout, Promise, async/await	TypeError: Failed to fetch, UnhandledPromiseRejection
5. Infrastructure / configuration errors	during build, rendering, hydration, or server interaction	SSR hydration mismatch, module not found, import error, invalid props

1. Render errors

These occur during the render phase, when React calls a component (functional or class) to build the virtual tree.

Code examples:

javascript

// data is undefined
return <div>{data.name}</div>;

// mapping over null
return data.map(item => <p>{item}</p>);

Consequences:

render() is interrupted.
React "crashes" up to the nearest Error Boundary.
If there isn't one, the entire app unmounts (white screen of death).

Solution:

Checks before rendering (if (!data) return null;)
Memoization and skeleton components.
Error Boundary around large sections.

2. Errors in effects (side effects)

Errors that occur:

in useEffect() and useLayoutEffect()
in lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount)

Code examples:

javascript

useEffect(() => {
  fetch("/api/data")
    .then(res => res.json())
    .then(setData)
    .catch(() => setError(true)); // without catch - UnhandledPromiseRejection
}, []);

Consequences:

The error doesn't break all of React, but it can stop the effect.
If the error isn't caught, it will show up in the console or in window.onunhandledrejection.

Solution:

Always wrap asynchronous calls in try/catch.
Cancel effects on unmount (cleanup).
Use AbortController for network requests.

3. Errors in event handlers

These occur on clicks, data entry, submits, and so on.

Example:

javascript

<button onClick={() => doSomething(undefined.value)}>Click</button>

Behavior:

The error doesn't affect other components (React handles events through its synthetic system).
But the user can lose UI interaction.

Solution:

try/catch inside handlers.
Logging (Sentry, GlitchTip, console.error).

4. Asynchronous errors

Errors outside the React cycle: in Promise, fetch, async/await, timers, and so on.

Code examples:

javascript

async function loadData() {
  const res = await fetch("/api/wrong-url"); // 404 → error
  const data = await res.json(); // throws an exception
}

Behavior:

They're not caught by Error Boundary.
If not caught, you get an UnhandledPromiseRejection and the app crashes in production (especially with SSR).

Solution:

try/catch around await.
.catch() on the Promise.
A global handler:

javascript
window.addEventListener("unhandledrejection", e => logError(e.reason));

5. Configuration / infrastructure errors

Errors at the level of the build, routing, SSR, and dependencies.

Code examples:

An incorrect route path ( doesn't match the URL)
An import error (Cannot find module)
A hydration mismatch with SSR (Warning: Text content did not match)
A build error in Webpack/Vite (Unexpected token)

Solution:

Environment setup (env variables, paths, aliases)
Logging and monitoring
Tests for routes and SSR

Additionally: logical errors

Not always exceptions, but they lead to incorrect logic:

incorrect state during an update;
infinite loops due to incorrect dependencies in useEffect;
memory leaks (setState after unmounting);
incorrect keys in lists (key).

Solution:

ESLint + React Hooks plugin
TypeScript (strict typing)
React DevTools + Profiler

Ways to protect against errors

Tool	What it's for
Error Boundary	Catching render and lifecycle errors
try/catch	Handling errors in events and async code
window.onerror / onunhandledrejection	Global error catching
Sentry / GlitchTip / LogRocket	Monitoring errors in production
TypeScript + ESLint	Preventing logical errors
React Testing Library / Jest	Testing edge cases

Summary:

A React application can have 5 main types of errors:

Render errors (JSX / undefined)

Effect and lifecycle errors

Event handler errors

Asynchronous errors (fetch, Promise, async/await)

Configuration and infrastructure errors (SSR, routing, build)

React by itself doesn't catch every error, only those that happen during render. That's why protection is a combination of Error Boundaries, try/catch, and solid monitoring.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.