DEV Community

Cover image for The power of React refs
Joseph C.
Joseph C.

Posted on

The power of React refs

In the official React definition “Refs provide a way to access DOM nodes or React elements created in the render method”.

In this article I will show you how Refs can be used for other purposes.

I will not dwell on the explanation of the concept or the various methods of creating refs. You can find all this on the following link: https://reactjs.org/docs/refs-and-the-dom.html

Standard use case

In a common scenario we can use refs like this:


In this case, ref is used as a reference to a DOM Input.
inputRef allow us access to input properties like value.

Advanced use — Timeout

The next example is a simple notice component. The notice can be closed by clicking a button, otherwise it will automatically close after a time limit.


In this case the ref is used to store a mutable data: the timeout ID

The steps are:

  1. Create the ref (line 6)

  2. Assign the timeout value to ref (line 18)

  3. Clear timeout:

    • If notice is closed by the user (line 13)
    • When component is unmounted (line 21)

Advanced use #2— RequestAnimationFrame

The next example is a simple component that renders a div with an animation on the height.

In this example 3 refs was created:

divRef: A classical use of refs. I’ts a reference to the Div element below.

requestRef: It contains the requestAnimationFrame id

heightRef: It contains the updated height value

The animate function is called until heightRef.current reaches the value of HEIGHT_LIMIT. heightRef.current is incremented by 1 each time the function is called.

If the component will be unmounted before heightRef.current reaches the value of HEIGHT_LIMIT, cancelAnimationFrame function will be executed

Advanced use #3 — Custom Hook

The next example creates a hook that returns a ref containing the x, y position of the mouse. With the help of the requestAnimationFrame a rounded div is animated to follow the mouse


The usePosition hook adds a mouseMove event to the window and stores the clientX and clientY values.
In the animate function of the Point component the values x and y are used to animate the top and left properties of the div referenced by pointRef

Conclusion

React refs are extremely useful for saving mutable data without triggering a re-render of the component.
They are powerful even when used in custom hooks and guarantee high performance.

Discussion (3)

Collapse
lico profile image
SeongKuk Han

Thanks for sharing :)

Collapse
yisusjuarez profile image
YJDev

Your avanced axample is the same as the first one, thank you anyway!

Collapse
josephciullo profile image
Joseph C. Author

Thank you for letting me know. I fixed the mistake!