FAQ: The Effect Hook - Clean Up Effects

This community-built FAQ covers the “Clean Up Effects” exercise from the lesson “The Effect Hook”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn React

FAQs on the exercise Clean Up Effects

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hi to whoever finds their way here,

This learning module React hooks is bugged.

The lesson will not pass despite having an identical solution to “view solution”

I’m sure this will be fixed soon as long as you report the bug.

import React, { useState, useEffect } from ‘react’;

export default function Counter() {

const [clickCount, setClickCount] = useState(0);

const increment = () => setClickCount((prev) => prev + 1);

useEffect(() => {

document.addEventListener(‘mousedown’, increment);

return () => {

document.removeEventListener(‘mousedown’, increment);

};

});

return (

<h1>Document Clicks: {clickCount}</h1>

);

2 Likes

Thanks for sharing. My code was accepted, and the lesson passed for “3. Clean Up Effects” module, so looks like someone addressed the bug.

BUT I see that nothing happens in the rendered window. It shows only “Document Clicks: 0” and nothing happens when I click anywhere in the browser window. Anyone else having this problem?

Nothing happens when I run it in Chrome or Firefox. Copied your code in (which looks identical to mine, to my newbie eyes), same result. Even when I try ‘keydown’ instead of ‘mousedown’ the browser doesn’t respond or change:

useEffect(() => {
    document.addEventListener('keydown',increment);
    return () => {
      document.removeEventListener('keydown',increment);
    };
  });

My original code that passes the lesson checkmark and allows me to continue but seems to be nonfunctional:

import React, { useState, useEffect } from 'react';
export default function Counter() {
  const [clickCount, setClickCount] = useState(0);
  // your code here
  const increment = () =>{
    setClickCount((prev) => prevCount+1);
  })
  useEffect(() => {
    document.addEventListener('mousedown',increment);
    return () => {
      document.removeEventListener('mousedown',increment);
    };
  });
  return (
      <h1>Document Clicks: {clickCount}</h1>
  );
}
1 Like

Same issue here, nothing happens.

On a different note to the comments above…

The Effect Cleanup lesson shows how to avoid ever growing stacks of event listeners by using a clean-up function in the callback’s return statement.

This is due to the fact that ‘addEventListeners()’ method allows setting up multiple identical listeners on a single document element.

useEffect(() => {
    document.addEventListener('mousedown', increment);
    return () => {
      document.removeEventListener('mousedown', increment);
    };
  });

The alternative approach would be to use the other method of creating event listeners. An event listener created using the following method is overwritten every single time, and doesn’t require any clean-up solution.

 useEffect(()=>{
    document.onmousedown = increment;
  });
1 Like

Have a look at this line of your code
setClickCount((prev) => prevCount+1);
It should be
setClickCount((prev) => prev + 1);

1 Like

Thanks for pointing that “prev” argument error out, @mtrtmk! With the change, I’m still getting a frozen screen that is unresponsive to document clicks. Were you able to get a functioning Counter.js in the lesson, which responds to document clicks with functioning event listeners?

The code as-is seems to be returning some kind of error that’s not reported back in JS console, and results in a frozen app that doesn’t update. I think this because editing anything, including the h1 element’s “Document Clicked:” text after the first render does not reflect in the displayed h1. I also try adding buttons, h2 (in an effort to try to get an event listener to work in this environment), but nothing shows up.

The h1 text will update at the beginning of the lesson at part "1."but after adding the useEffect nothing updates.

Finally, in the DOM elements > event listeners window of Chrome DevTools, under “mousedown”, 4 identical, blank event listeners appear, none of which contain any of the language added in Counter.js. See screenshot. Clicking on “clean-up-effects:7” leads to an empty file in sources, with no shown “global listeners”. Are functioning event listeners usually visible somewhere in Chrome DevTools?

What am I missing?

My code, edited after mtrtmk’s helpful comment:

import React, { useState, useEffect } from 'react';
export default function Counter() {
  const [clickCount, setClickCount] = useState(0);
  // your code here
  const increment = () =>{
    setClickCount((prev) => prev+1);
  })
  useEffect(() => {
    document.addEventListener('mousedown',increment);
    return () => {
      document.removeEventListener('mousedown',increment);
    };
  });
  return (
      <h1>Document Clicks: {clickCount}</h1>
  );
}

DevTools listed event listeners screenshot:

I think your problem lies in the snippet:

const increment = () =>{
    setClickCount((prev) => prev+1);
  })

You have an extra closing parenthesis. Remove it and use a semi-colon instead.

const increment = () =>{
    setClickCount((prev) => prev+1);
  };

I think that should fix the issues you are seeing.

1 Like