Refs
Loading "Refs"
Run locally for transcripts
π¨βπΌ Our users want a button they can click to increment a count a bunch of times.
They also like fancy things. So we're going to package it in a fancy way.
In this exercise we're going to use a completely different example. We're going
to make a
<Tilt /> component that renders a div and uses the
vanilla-tilt library to make it
super fancy.The thing is,
vanilla-tilt works directly with DOM nodes to setup event
handlers and stuff, so we need access to the DOM node. But because we're not the
one calling document.createElement (React does) we need React to give it to
us.So in this exercise we're going to use a
ref so React can give us the DOM node
and then we can pass that on to vanilla-tilt.Additionally, we'll need to clean up after ourselves if this component is
unmounted. Otherwise we'll have event handlers dangling around on DOM nodes that
are no longer in the document which can cause a memory leak.
The emoji will guide you. Enjoy!
