Autoplay

    Access and Modify a DOM Node with the React useRef and useEffect Hooks

    Kent C. DoddsKent C. Dodds

    React 16.7.0-alpha.0 was recently released and with it comes a set of experimental hooks and features. Use these with caution as they are likely to change in the near future.

    To use VanillaTilt we need to get access to a div so that it can work its magic. To make this happen we'll learn about React's useRef and useEffect methods.

    We'll cover:

    • Creating a reference to a DOM node with useRef
    • Making a callback function using useEffect
    • Using .init to assign VanillaTilt to that DOM node
    • Returning a cleanup function to avoid memory leaks
    • Initializing useEffect with a dependency list to prevent rerendering.
    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss