Working with refs in React

react

Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an <input> element, but without using props or re-rendering the whole component.

When to use Refs:

Here are a few good use cases for refs:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries.

We can use ref in functional and class components both by using React.useRef and React.createRef respectively.

React.createRef and React.useRef

Both React APIs are used to create a mutable object. The mutable object’s properties can be changed without affecting the Component’s state i.e refs are used when there is no need to re-render the component.

The object has a current property, this property is where the value is stored and referenced.

These APIs create these mutable objects which can be called refs. They hold a reference to any value we want

React.createRef are used in class components to create refs.
React.useRef are used in functional components to create refs.

Let’s create a functional component and use React.useRef.

Increament the count by using ref:

import React, {useRef, useEffect } from "react";
const CheckRef = () => {
  const renderCount = useRef(0);
  return (
    <>
      <div>
       <button onClick={() => handleCount()}>Increase Render Count</button>
      <div>Render Item {renderCount.current} times.</div>
     <div>
     )
}

In the above example, we created a refs named as renderCount with an initial value 0 and used {renderCount.current} to show count value.
and click event on the button named as handleCount.

Let’s create a state with the help of this state that will change the value of count on click event.

const [countVal, setCountVal] = useState(false);
const handleCount = () => {
    setCountVal(countVal ? false : true);
};
 useEffect(() => {
    renderCount.current = renderCount.current + 1;
});

Here on click event countVal will be changed from true to false and vice versa, As we know by using useEffect hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.

So this will increase the count by one every time the user clicks on the button.

Focus on Input by using ref

import React, {useRef} from "react";
const CheckRef = () => {
  const inputRef = useRef("");
    return (
        <>
         <div>
           <input ref={inputRef}></input>
             <button onClick={() => inputFocus()}>
                Input Focus</button>
         </div>
    )
}

In the above example, we created refs named as inputRef with an initial value blank and click event on the button named as inputFocus.

const inputFocus = () => {
     inputRef.current.focus();
};

By clicking on the Input Focus button, inputRef.current.focus() will move focus on Input.

We can do the same thing with the class component, Let’s create a class component and use React.CreateRef.

Focus on Input by using React.CreateRef

class CheckRefConstructor extends React.Component {
       constructor(props) {
          super(props);
          this.inputRef= React.createRef();
       } 
    render() {
      return (
        <div>
            <input type="text" ref={this.inputRef} />
            <button onClick={this.focusInput}>Focus input</button>
</div>
       );
     }
}

In the above example, we created refs named as inputRef by using React.createRef() and click event on the button named as this.focusInput.

this.focusInput = () => {
     this.inputRef.current.focus();
};

By clicking on Focus input button, inputRef.current.focus() will move focus on Input.

Thanks for Reading!!!!!!!!