Useref Hook in React
Useref Hook in React
@linkinsunil
useRef ()
Referencing Values in React
Current
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:
You can access the current value of that ref through the
ref.current property.
swipe
SUNIL VISHWAKARMA 3
@linkinsunil
swipe
SUNIL VISHWAKARMA 4
@linkinsunil
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.
swipe
SUNIL VISHWAKARMA 5
@linkinsunil
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])
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.
swipe
SUNIL VISHWAKARMA 8
@linkinsunil
swipe
SUNIL VISHWAKARMA 9
@linkinsunil
swipe
SUNIL VISHWAKARMA 9
@linkinsunil
Thats a Wrap!
If you liked it, checkout my other posts🔥