How do you create and use refs?

Q: How do you create and use refs?

**In Functional Components:** We use **useRef Hook** It returns a mutable object that persists for the full lifetime of the component. **In Class Components:** React.createRef(), Similar to useRef, it creates an object with a .current property. **In Class Components:** Callback method, Instead of passing a ref object created by createRef, you pass a function. React will call this function with the DOM element when the component mounts, and with null when it unmounts. ref={(input) => this.input = input} We simply set the ref attribute in the with a function instead of ref attribute created by useRef(). This function receives the DOM node and assigns it to the inputRef we declared before. Since we didn't create a ref with useRef the inputRef variable stores the DOM element itself hence we don't need to access the .current property, as you can see in the onClick and onFocusClick functions. class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( this.input = input} /> Submit ) } }

Difficulty: 5/10

useRef, forwardRef, callback refs

There are two ways to use refs:

1
In Functional Components: We use useRef Hook It returns a mutable object that persists for the full lifetime of the component.
2
In Class Components: React.createRef(), Similar to useRef, it creates an object with a .current property.
3
In Class Components: Callback method, Instead of passing a ref object created by createRef, you pass a function. React will call this function with the DOM element when the component mounts, and with null when it unmounts.

createRef() method : Refs are created using React.createRef() method and attached to React elements via the ref attribute. To use refs throughout the component, just assign the ref to the instance property within a constructor.

Callback method : we add a ref attribute to your component whose value is a callback function that will receive the underlying DOM element or the mounted instance of the component as its first argument.

1
We simply set the ref attribute in the <input> with a function instead of ref attribute created by useRef().
2
This function receives the DOM node and assigns it to the inputRef we declared before.
3
Since we didn't create a ref with useRef the inputRef variable stores the DOM element itself hence we don't need to access the .current property, as you can see in the onClick and onFocusClick functions.

javascript

Scenario Questions

0-2 years experience

How do you create and use refs?

Scenario Questions

Follow-up Questions