Scribd
Upload
23 views

53 - Useref Mutable

The document discusses the useRef hook in React. It can be used to 1) access DOM elements directly and 2) store mutable values that don't cause re-renders when updated. The useRef hook allows persisting values between renders by returning an object with a .current property initialized to the passed argument. Unlike useState, useRef does not cause re-renders when the .current value is updated, making it useful for things like avoiding infinite loops during re-renders.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views

53 - Useref Mutable

The document discusses the useRef hook in React. It can be used to 1) access DOM elements directly and 2) store mutable values that don't cause re-renders when updated. The useRef hook allows persisting values between renders by returning an object with a .current property initialized to the passed argument. Unlike useState, useRef does not cause re-renders when the .current value is updated, making it useful for things like avoiding infinite loops during re-renders.

Uploaded by

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

PART-53

useRef Hook
REACT
PRESENTER: MOHAMMAD ADIL
Pre-Requisites REACT

• useState
• useEffect
• useRef
Humble Request REACT

Techno Verse YT

Heavenly Delicious
useRef Hook REACT

• 1. It can be used to access a DOM element directly.


useRef Hook REACT

• 2. It can be used to store a mutable value that does not cause a re-
render when updated.
• The useRef Hook allows you to persist values between renders.
• The useRef Hook is a function that returns a mutable ref object whose
.current property is initialized with the passed argument
(initialValue).
• The returned object will persist for the full lifetime of the
component.
Does Not Cause Re-renders REACT

• If we tried to count how many times our application renders using the
useState Hook, we would be caught in an infinite loop since this Hook
itself causes a re-render.
• To avoid this, we can use the useRef Hook.
useRef Hook REACT

• useRef() only returns one item. It returns an Object called current.


• When we initialize useRef we set the initial value: useRef(0).
• It's like doing this: const count = {current: 0}. We can access the
count by using count.current.

You might also like