FAQ: The Effect Hook - Lesson Review

This community-built FAQ covers the “Lesson Review” 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 Lesson Review

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 Language Help.

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

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

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 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!

In the main example on the first lesson, It says that the example with the “useEffect” is the same as the class example. Wouldn’t the “useEffect” example initially set the document title to "Hi, " whereas the class example set it as “”?

This was a tough module with some frustrating technical issues, but I really learned a lot. Watching some YouTube videos was also really helpful.

Sharing some thoughts here.

Most of the CC material I’ve done so far has given a lot more granular introduction into the material. But here I really felt at a loss to complete the lessons without revealing the answers.

A technique I encountered in “Learning to Code the Hard Way” was to painstakingly write out solutions line by line and precisely explain to yourself what every call was doing. This is the only way I made it through this unit, and I intend to repeat the unit again next week hopefully without needing to see solutions but to have a good enough command of the syntax to complete the tasks without assistance.

When a boulder blocks the passage of water, the water finds a crack and runs through that. Eventually the rock is eroded away and the water flows freely. This is how I feel about this unit. My only way through it was to explain line by line what the solutions revealed to me. I also felt I could learn better syntax formatting by carefully studying the solutions.

Here’s to trying to stay encouraged to learn this stuff :slight_smile:

Hello,

I’m working on the project “Passing Thoughts” that reinforces the hooks lesson. Can someone explain where the functionality of .expiresAt comes from in the following code? The intention is to create a 15 second timer, but I’m struggling to see how it works.

useEffect(() => {
  const timeRemaining = thought.expiresAt - Date.now();
  const timeout = setTimeout(() => {
    alert('Time has passed!');
  }, timeRemaining);
  return () => {
    clearTimeout(timeout);
  };
}, [thought]);

I think (not sure) there should be a folder icon in top left corner of the editor. It should allow you to browse all the files being used in the project.

In utilities.js, you should find

export function getNewExpirationTime() {
  return Date.now() + 15 * 1000;
}

In AddThought.js, you should find

const handleSubmit = (event) => {
    event.preventDefault();
    const thought = {
      id: generateId(),
      text: text,
      expiresAt: getNewExpirationTime(),
    }
    if (text.length > 0) {
      props.addThought(thought);
      setText('');
    }
  };

When you submit a new thought, a thought object (containing id, text and expiresAt properties) will be created. The value of the expiresAt property will come from the getNewExpirationTime function. The getNewExpirationTime function accesses the current time (in milliseconds — see documentation (Date.now() - JavaScript | MDN) for more details) and adds 15000ms or 15sec to the current time (the current time being the time when the thought was submitted). This is set as the value for the expiresAt property of the corresponding thought object. In the useEffect posted by you, the timeRemaining variable accesses the value assigned to the expiresAt property of the thought object and then subtracts the current time (the current time being when the useEffect is being executed). The setTimeout (setTimeout() global function - Web APIs | MDN) then sets a timer with a delay of timeRemaining. Once the timer elapses, the alert('Time has passed!') is displayed.

1 Like

Very lucid as always. Thank you!

1 Like