This error occurs when the call stack (the structure that stores function calls) exceeds its maximum size. This typically happens with infinite recursion or very deep function call chains.
// ⌠Problem - Infinite recursion
function countdown(n) {
console.log(n);
countdown(n - 1); // No base case!
}
// ✅ Solution - Add base case
function countdown(n) {
if (n <= 0) return; // Base case
console.log(n);
countdown(n - 1);
}
// ✅ Solution - Use iteration instead
function countdown(n) {
for (let i = n; i > 0; i--) {
console.log(i);
}
}The most common cause - recursive function without a stopping condition.
Two or more functions calling each other in a loop.
Event handlers that trigger the same event they're listening to.
Recursion works but the dataset is too large for the call stack.
In React, calling setState during render causes infinite loop.
// Factorial without base case
function factorial(n) {
return n * factorial(n - 1); // Infinite recursion!
}
factorial(5); // RangeError: Maximum call stack size exceeded// Add base case
function factorial(n) {
if (n <= 1) return 1; // Base case
return n * factorial(n - 1);
}
factorial(5); // 120
// Or use iteration (better for performance)
function factorial(n) {
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}function isEven(n) {
if (n === 0) return true;
return isOdd(n - 1);
}
function isOdd(n) {
if (n === 0) return false;
return isEven(n - 1);
}
isEven(-1); // Infinite loop! Never reaches base case// Add validation for negative numbers
function isEven(n) {
n = Math.abs(n); // Handle negative numbers
if (n === 0) return true;
return isOdd(n - 1);
}
function isOdd(n) {
n = Math.abs(n); // Handle negative numbers
if (n === 0) return false;
return isEven(n - 1);
}
// Or use simple modulo (better)
function isEven(n) {
return n % 2 === 0;
}
function isOdd(n) {
return n % 2 !== 0;
}const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked');
button.click(); // Triggers itself infinitely!
});// Solution 1: Remove the recursive call
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked');
// Don't trigger click again
});
// Solution 2: Use a flag to prevent recursion
let isProcessing = false;
button.addEventListener('click', function() {
if (isProcessing) return;
isProcessing = true;
console.log('Button clicked');
// Do your work
isProcessing = false;
});
// Solution 3: Remove listener before triggering
function handleClick() {
console.log('Button clicked');
button.removeEventListener('click', handleClick);
button.click(); // Now safe
button.addEventListener('click', handleClick);
}
button.addEventListener('click', handleClick);// Sum array recursively
function sumArray(arr) {
if (arr.length === 0) return 0;
return arr[0] + sumArray(arr.slice(1));
}
const largeArray = new Array(100000).fill(1);
sumArray(largeArray); // RangeError: Maximum call stack size exceeded// Solution 1: Use iteration
function sumArray(arr) {
let sum = 0;
for (let num of arr) {
sum += num;
}
return sum;
}
// Solution 2: Use reduce
function sumArray(arr) {
return arr.reduce((sum, num) => sum + num, 0);
}
// Solution 3: Tail recursion with trampoline (advanced)
function sumArray(arr, sum = 0) {
if (arr.length === 0) return sum;
return () => sumArray(arr.slice(1), sum + arr[0]);
}
function trampoline(fn) {
while (typeof fn === 'function') {
fn = fn();
}
return fn;
}
const largeArray = new Array(100000).fill(1);
trampoline(sumArray(largeArray)); // Works!function Counter() {
const [count, setCount] = useState(0);
// ⌠setState in render causes infinite loop
setCount(count + 1);
return <div>{count}</div>;
}// Solution 1: Move setState to event handler
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>{count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
// Solution 2: Use useEffect for side effects
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
// Safe to call setState here
setCount(1);
}, []); // Empty dependency array = run once
return <div>{count}</div>;
}This error occurs when the call stack (which stores function calls) exceeds its limit. Common causes include infinite recursion, missing base cases in recursive functions, circular function calls, or very deep recursion with large datasets.
Add a base case to stop recursion, validate input to prevent infinite loops, use iteration instead of recursion for large datasets, or implement tail recursion optimization.
The limit varies by browser and JavaScript engine. Chrome typically allows ~10,000-15,000 calls, Firefox ~50,000, and Node.js ~10,000-15,000. The limit depends on available memory and stack frame size.
Use recursion for tree/graph traversal, divide-and-conquer algorithms, and when the problem is naturally recursive. Use iteration for simple loops, large datasets, and when performance is critical.
Use browser DevTools to inspect the call stack, add console.log to track function calls, set breakpoints in recursive functions, and check for missing base cases or incorrect recursion logic.
Explore 500+ free tutorials across 20+ languages and frameworks.