React Hooks tutorials for beginners-12

Image for post
Image for post
Redux

Welcome to part-12 of the series. You can find part-11 here. We will learn about useRef hook in this part.

The useRef hook makes it possible to access DOM nodes directly within functional components. So, go ahead and create new React project ref-hook by the below command

npx create-react-app red-hook

Now, in App.js include the FocusInput and remove the earlier default code.

Image for post
Image for post
App.js

In our project we want to do see the classic use of hook, that is to focus the input box on page load. So, go ahead and create a components folder inside src folder. Create a file FocusInput.js inside it.

First, we want to implement the componentDidMount behaviour, as we want to focus on the input element only once and that is after the component has mounted. We will do this using the useEffect hook with empty array.

After that we will include the useRef hook and use the current.focus() to focus on the input box.

Image for post
Image for post
FocusInput.js

Now, go to localhost and the Input is focussed.

Image for post
Image for post
Focussed input

We will look into another use of useRef hook now. For that we will first check it in a class based component. So, go ahead and create a file ClassTimer.js inside the components folder. Here, we have implemented a simple timer using componentDidMount(0 and componentWillUnmount().

Image for post
Image for post
ClassTimer.js

Now, include it in App.js.

Image for post
Image for post
App.js

And the timer works perfectly in localhost.

Image for post
Image for post
localhost

Now, we want to clear this interval timer on a button click. This is very easy to achieve with a button calling clearInterval.

Image for post
Image for post
button

And it will work as expected.

Image for post
Image for post
As expected

Now, we want to replicate the exact scenario with functional component. We will create a HookTimer.js inside the components folder. Here, we are using what we had learnt earlier with useEffect hook to implement our timer.

Image for post
Image for post
HookTimer.js

Now, also include the HookTimer in App.js file.

Image for post
Image for post
App.js

Now, the Counter works perfectly for Hook.

Image for post
Image for post
Hook

Now, we want to replicate the button used to stop the timer. So, we will add similar functionality as class based component.

Image for post
Image for post
HookTImer.js

But, going back to the browser we see we have a problem.

Image for post
Image for post
Problem

This happens because the variable interval is defined within the useEffect and doesn’t exist outside of it. Now, here useRef will come to our rescue as it can be used to hold any mutable value. The value will persists through re-renders and will also not cause any additional renders, when it’s value changes.

So, we will store our variable in intervalRef and use the intervalRef.current to use it.

Image for post
Image for post
useRef

And it will work perfectly as expected with the interval been closed on click of the button.

Image for post
Image for post
Hook Working

This completes part-12 of the series. You can find part-13 here.

You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store