Scribd
Upload
31 views11 pages

Useref Hook in React

Uploaded by

Rajavel Balasubramanian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views11 pages

Useref Hook in React

Uploaded by

Rajavel Balasubramanian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

SUNIL VISHWAKARMA

@linkinsunil

useRef ()
Referencing Values in React

When you want a component to remember some


information, but you don’t want that information
to trigger new renders, you can use a ref.

Lets See into


1. How to add a ref to component?
2. How to update a ref’s value?
3. How refs are different from state?
4. When to use refs?
5. Best practices for using refs?

Current

⚠️ Please Like & Share for no reason


SUNIL VISHWAKARMA 2
@linkinsunil

1. Adding a ref to component


importing the useRef Hook from React:

Inside your component, call the useRef Hook and pass the
initial value that you want to reference as the only
argument. Here is a ref to the value 0:

useRef returns an object like this:

You can access the current value of that ref through the
ref.current property.

swipe
SUNIL VISHWAKARMA 3
@linkinsunil

Illustrated by Rachel Lee Nabors

This current value of the ref, which stays in the ref.current


property, is intentionally mutable, meaning you can both
read and write to it. It’s like a secret pocket of your
component that React doesn’t track. (This is what makes it
an “escape hatch” from React’s one-way data flow)

swipe
SUNIL VISHWAKARMA 4
@linkinsunil

2. Updating a ref’s value


Here, a button will increment ref.current on every click:

Here, the ref points to a number, but, like state, you could
point to anything: a string, an object, or even a function.
Unlike state, ref is a plain JavaScript object with the
current property that you can read and modify.

Note that the component doesn’t re-render with every


increment. Like state, refs are retained by React between
re-renders. However, setting state re-renders a
component. Changing a ref does not!

swipe
SUNIL VISHWAKARMA 5
@linkinsunil

Example: Building A Stopwatch


To display how much time has passed since the user
pressed “Start”, you will need to keep track of when the
Start button was pressed and what the current time is.
This information is used for rendering, so you’ll keep it in
state.
When the user presses “Start”, you’ll use setInterval in
order to update the time every 10 milliseconds.
When the “Stop” button is pressed, you need to cancel
the existing interval so that it stops updating the now
state variable. You can do this by calling clearInterval,
but you need to give it the interval ID that was
previously returned by the setInterval call when the
user pressed Start. You need to keep the interval ID
somewhere. Since the interval ID is not used for
rendering, you can keep it in a ref. See the code
ahead.

When a piece of information is used for rendering, keep it


in state. When a piece of information is only needed by
event handlers and changing it doesn’t require a re-
render, using a ref may be more efficient.

swipe
SUNIL VISHWAKARMA 6
@linkinsunil

A Stopwatch

swipe
SUNIL VISHWAKARMA 7
@linkinsunil

3. refs vs state
refs state

useState(initialValue) returns
useRef(initialValue)
the current value of a state
returns { current:
variable and a state setter
initialValue }
function ( [value, setValue])

Doesn’t trigger re-


Triggers re-render when you
render when you
change it.
change it.

Mutable—you can
“Immutable”—you must use
modify and
the state setting function to
update current’s value
modify state variables to
outside of the
queue a re-render.
rendering process.

You can read state at any


You shouldn’t read (or
time. However, each render
write) the current value
has its own snapshot of state
during rendering.
which does not change.

swipe
SUNIL VISHWAKARMA 8
@linkinsunil

4. When to use refs


You will use a ref when your component needs to step
outside React and communicate with external APIs—often
a browser API that won’t impact the appearance of the
component. Here are a few of these rare situations:

Storing timeout IDs


Storing and manipulating DOM elements
(stay tuned for a separate post for this one)
Storing other objects that aren’t necessary to
calculate the JSX.

If your component needs to store some value, but it


doesn’t impact the rendering logic, choose refs.

swipe
SUNIL VISHWAKARMA 9
@linkinsunil

5. Best practices for refs


Treat refs as an escape hatch. Refs are useful when
you work with external systems or browser APIs. If much
of your application logic and data flow relies on refs,
you might want to rethink your approach.
Don’t read or write ref.current during rendering. If some
information is needed during rendering, use state
instead. Since React doesn’t know when ref.current
changes, even reading it while rendering makes your
component’s behavior difficult to predict. (The only
exception to this is code like if (!ref.current) ref.current =
new Thing() which only sets the ref once during the first
render.)
Limitations of React state don’t apply to refs. For
example, state acts like a snapshot for every render
and doesn’t update synchronously. But when you
mutate the current value of a ref, it changes
immediately. This is because the ref itself is a regular
JavaScript object, and so it behaves like one.
No need to worry about avoiding mutation when you
work with a ref. As long as the object you’re mutating
isn’t used for rendering, React doesn’t care what you
do with the ref or its contents.

swipe
SUNIL VISHWAKARMA 9
@linkinsunil

Thats a Wrap!
If you liked it, checkout my other posts🔥

and many more short and easy explanations

You might also like