- Use the
useEffecthook with the dependencies array - Use a cleanup function with
useEffectto stop background processes
In the labs for this section, we're going to be building a trivia app! The first feature we're going to work on is the Question component.
There is some starter code for us to work with. There's a Question component
already set up to display the question and a list of possible answers. It's also
hooked up to its parent component, App, so that it has access to all the props
it needs.
The feature we're going to build out using useEffect is a countdown timer,
so that the user has to answer each question within 10 seconds.
When the Question component renders, create a side effect using useEffect and
use setTimeout to run a callback function after 1 second.
Inside the callback function for setTimeout, use the setTimeRemaining
function to decrease the amount of time remaining by 1 every 1 second.
When timeRemaining hits 0, do the following:
- reset
timeRemainingback to 10 seconds, so our next question will have a fresh timer; and - call the
onAnsweredcallback prop with a value of false (onAnswered(false)), to trigger some behavior in the App component.
You should also use the cleanup function for useEffect to clean up after
the timeout function.
Make sure to pay attention to any warning/error messages in the console as a
result of using useEffect, and clean them up by providing any necessary
dependencies in the second argument of useEffect.
If you're stuck on getting the timer working, or encountering some strange behavior, make sure to check out the resources below!