How to fix Event listener was added but is preventing re-renders in React

What this error means

When you attach an event listener (like window.addEventListener or element.addEventListener) in React without proper dependency management, the event handler captures a stale closure of your component's state. This means the handler only has access to state values from when useEffect first ran, not the current values. The event listener itself doesn't prevent re-renders—React still re-renders on state changes—but the listener's frozen state can mask real problems and make updates appear ineffective. If you re-render but the listener still uses old data, parts of your app may seem unresponsive.

Typical symptoms

• Event handlers use outdated state values after component updates
• Clicking buttons or triggering events doesn't seem to affect state
• Console logs inside event handlers show stale values
• UI appears to freeze or not respond to user interactions
• New event listeners are created on every render, accumulating in memory

Common causes

1. Event listener added in useEffect with empty dependency array, but handler accesses state variables
2. Stale closure: the handler was defined once and never updated, so it always uses initial state values
3. Missing cleanup function that removes the old listener before attaching a new one
4. Adding multiple listeners without removing previous ones, causing duplicate handlers to fire
5. Using state variables directly in addEventListener callback without including them in useEffect dependencies

How to fix "Event listener was added but is preventing re-renders"

// WRONG - handler always sees count = 0
useEffect(() => {
  window.addEventListener("click", () => {
    console.log(count);  // Always logs 0
  });
}, []);  // Empty dependency array

// RIGHT - listener updates when count changes
useEffect(() => {
  const handleClick = () => {
    console.log(count);  // Logs current value
  };
  window.addEventListener("click", handleClick);
  return () => window.removeEventListener("click", handleClick);
}, [count]);  // Include count in dependencies

import { useRef } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count;
  }, [count]);

  useEffect(() => {
    const handleClick = () => {
      console.log(countRef.current);  // Always current value
    };
    window.addEventListener("click", handleClick);
    return () => window.removeEventListener("click", handleClick);
  }, []);  // Listener never recreates
}

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handleClick = () => {
      // setCount receives latest state as argument
      setCount(prevCount => {
        console.log(prevCount);  // Always current
        return prevCount + 1;
      });
    };
    window.addEventListener("click", handleClick);
    return () => window.removeEventListener("click", handleClick);
  }, []);  // No dependencies needed
}

useEffect(() => {
  const handleScroll = () => {
    console.log("scrolling");
  };

  window.addEventListener("scroll", handleScroll);

  // Cleanup function runs before effect re-runs and on unmount
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

import { useEffect, useRef } from "react";

// Pseudo-code for useEffectEvent pattern (experimental in React 19)
function Counter() {
  const [count, setCount] = useState(0);

  // In React 19: useEffectEvent lets you access latest state
  // without creating effect dependencies
  useEffect(() => {
    const handleClick = () => {
      // Always accesses current count
      console.log(count);
    };
    window.addEventListener("click", handleClick);
    return () => window.removeEventListener("click", handleClick);
  }, [count]);
}

Advanced notes

Frequently asked questions

What does "Event listener was added but is preventing re-renders" mean?

addEventListener) in React without proper dependency management, the event handler captures a stale closure of your component's state. This means the handler only has access to state values from when useEffect first ran, not the current values. The event listener itself doesn't prevent re-renders—React still re-renders on state changes—but the listener's frozen state can mask real problems and make updates appear ineffective.

How do I fix "Event listener was added but is preventing re-renders"?

Event listeners added in useEffect without proper dependency handling can trap state values in stale closures, preventing component updates from being recognized and causing UI updates to fail.

What causes "Event listener was added but is preventing re-renders"?

Event listener added in useEffect with empty dependency array, but handler accesses state variables Stale closure: the handler was defined once and never updated, so it always uses initial state values Missing cleanup function that removes the old listener before attaching a new one

Is the "Event listener was added but is preventing re-renders" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Component has no displayName but is being exported

  Component has no displayName but is being exported

  LOW

• Event handler received null instead of event object

  How to fix "Event handler received null instead of event object" in React

  MEDIUM

• export 'Component' (imported as 'Component') was not found in 'module'

  Export was not found in module

  MEDIUM

• TypeError: [event handler] is not a function

  Event handler is not a function

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation