Dependencies
Loading "Dependencies"
Run locally for transcripts
π¨βπΌ Our users wanted to be able to control
vanilla-tilt
a bit. Some of them
like the speed and glare to look different. So Kellie π§ββοΈ added a form that will
allow them to control those values. This is working great, but something we
noticed is the tilt effect is getting reset whenever you click the count button!π¦ The reason this happens is because the ref callback is called every time the
component is rendered (and the cleanup runs between renders). So we're
re-initializing the tilt effect on every render.
π¨βπΌ This is inefficient and it's a jarring experience if the user clicks on the
corner of the count button. We want the effect to only re-initialize when the
options change.
The trick is we want the effect to re-initialize when the
vanillaTiltOptions
change, but nothing else. So we can use useEffect
to do that:useEffect(
() => {
// set up stuff
return function cleanup() {
// clean up stuff
}
},
// depend on stuff:
[],
)
π¦ React needs to know when it needs to run your effect callback function again.
We do this using the dependency array which is the second argument to
useEffect
. Whenever values in that array changes, React will call the returned
cleanup function and then invoke the effect callback again.By default, if you don't provide a second argument,
useEffect
runs after every
render (similar to what we're currently experiencing with the ref
callback).
While this is probably the right default for correctness, it's far from optimal
in most useEffect
cases. If you're not careful, it's easy to end up with
infinite loops (imagine if you're calling setState
in the effect which
triggers another render, which calls the effect, which calls setState
and so
on).π¨βπΌ So what we need to do in this step is move our
ref
callback stuff to
useEffect
, create a useRef
so we can access the DOM node in the useEffect
callback, and let React know that our effect callback depends on the
vanillaTiltOptions
the user is providing. Let's do that by passing the
vanillaTiltOptions
in the dependency array.You'll notice an issue when you've finished this step. If you click the button
to increment the count, the tilt effect is still reset! We'll fix this in the
next step.