what is ref in react hook - Wikitechy https://www.wikitechy.com/interview-questions/tag/what-is-ref-in-react-hook/ Interview Questions Wed, 04 May 2022 07:05:21 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://www.wikitechy.com/interview-questions/wp-content/uploads/2025/10/cropped-wikitechy-icon-32x32.png what is ref in react hook - Wikitechy https://www.wikitechy.com/interview-questions/tag/what-is-ref-in-react-hook/ 32 32 What is a ref ? How do you use it ? https://www.wikitechy.com/interview-questions/reactjs/what-is-a-ref-how-do-you-use-it/ https://www.wikitechy.com/interview-questions/reactjs/what-is-a-ref-how-do-you-use-it/#respond Sat, 26 Mar 2022 10:56:36 +0000 https://www.wikitechy.com/interview-questions/?p=4004
  • It is a function provided by React to access the DOM element and the React element that you might have created on your own.
  • In React, a ref is a reference to a DOM element.
  • It can be immediately placed in a variable.
  • They are created with the help of useRef
  • This variable is then passed to a given React element (not a component) to get a reference to the underlying DOM element (that is, div, span, and so on).
  • Properties are now available on the element itself.
  • Refs are often referred to as an “escape hatch” to be able to work with a DOM element directly.
  • They allow us to do certain operations that can’t be done through React otherwise, such as clearing or focusing an input.

    • For Example,

    // using refs

    class App extends React.Component {

     constructor(){

      super();

      this.state = { sayings: ""};

     }

     update(e){

      this.setState({ sayings: this.refs.anything.value});

     }

     render(){

      return (

       <div>

        Welcome to Kaashiv <input type="text" ref="anything"

          onChange = {this.update.bind(this)}/>

       <br/>

       <em>{this.state.sayings}</em>

      </div>

      );

     }

    }

     ReactDOM.render(< App />, document.getElementById('root'));

     

     Output:

    ]]>     https://www.wikitechy.com/interview-questions/reactjs/what-is-a-ref-how-do-you-use-it/feed/ 0