Category: Uncategorized

The useRef hook is the new addition in React 16.8.

The useRef is a hook that allows to directly create a reference to the DOM element in the functional component.

Syntax

#ref Syntax
const refContainer = useRef(initialValue);

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).

The returned object will persist for the full lifetime of the component.

To understand useRef in more detail it is better to explain it with example. So here we are taking an example to explain useRef in more detail.

Note: For explaining this example will have to create a react application. That we have already done. You can also do using this command

#Create react app
yarn create react-app useref_example  

Then after using this command to run the application

#run app
yarn start

after that, we will get our fresh newly react app in the browser as shown below.

Now we open index.js file that is being looked like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Now we modify the script for performing our target task that is to implement useRef

As we have earlier mentioned that useRef manipulates DOM elements. So, here we declare a few DOM elements like h1 and input as shown in the below code.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

const App = () => {

  return (
    <>
      <h1>This is UseRef  Example</h1>
      <input type="number" />
      <button>Submit</button>
    </>
  )
}

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

reportWebVitals();

After changing the inside code our screen will be look like this

Then after we will define a state and useRef variable as mentioned in code below.

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

const App = () => {
//Declare state
  const [myNum, setMyNum] = useState(0);
//Declare useRef
  const inputOne = useRef();
  return (
    <>
      <h1>This is UseRef  Example</h1>
      <input type="number" />
      <button>Submit</button>
    </>
  )
}

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

reportWebVitals();

After Declaring that we will create a function that will be called after the button is clicked. In side that function we have also printed useRef value and we will check what will be the output?

So now our code will be looks like this

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

const App = () => {
  const [myNum, setMyNum] = useState(0);
  const inputOne = useRef();

  const getNumBox = () => {
    console.log("hello world");
    console.log(inputOne);

  }
  return (
    <>
      <h1>This is UseRef  Example</h1>
      <input type="number" value={myNum}/>
      <button onClick={() => getNumBox()}>Submit</button>
    </>
  )
}

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

reportWebVitals();

After that, we will check what the output will occur.

After clicking submit button we will get undefied as .current value. Now we will assign ref value to the input field as shown below.

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

const App = () => {
  const [myNum, setMyNum] = useState(0);
  const inputOne = useRef();

  const getNumBox = () => {
    console.log("hello world");
    console.log(inputOne);

  }
  return (
    <>
      <h1>This is UseRef  Example</h1>
      <input
        type="number"
        value={myNum}
        ref={inputOne}
        onChange={e => setMyNum(e.target.value)}
      />
      <button onClick={() => getNumBox()}>Submit</button>
    </>
  );
}

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

reportWebVitals();

Now our output will look like this

Now we perform some action on this input field that I am changing the width of the input field after clicking submit button.

import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

const App = () => {
  const [myNum, setMyNum] = useState(0);
  const inputOne = useRef();

  const getNumBox = () => {
    console.log("hello world");
    inputOne.current.style.width = "400px";
    console.log(inputOne);

  }
  return (
    <>
      <h1>This is UseRef  Example</h1>
      <input
        type="number"
        value={myNum}
        ref={inputOne}
        onChange={e => setMyNum(e.target.value)}
      />
      <button onClick={() => getNumBox()}>Submit</button>
    </>
  );
}

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

reportWebVitals();

Then after our screen will be looking at this after clicking on submit button.

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render.

If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.