React Hooks tutorials for beginners-12

Redux

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

useRef hook

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.

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.

FocusInput.js

Now, go to localhost and the Input is focussed.

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().

ClassTimer.js

Now, include it in App.js.

App.js

And the timer works perfectly in localhost.

localhost

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

button

And it will work as expected.

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.

HookTimer.js

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

App.js

Now, the Counter works perfectly for Hook.

Hook

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

HookTImer.js

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

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.

useRef

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

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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

REACT NEWS : Tools for Learning React, Mobile Native Development, Flow, ReactVR and Open Source…

Laravel Multi Auth using Guards with Example [Web Authentication]

Promises in Javascript; ELI5

What are the Factors that affect the Cost of React Native App Development?

Authentication with React and .NET Core using Okta (openID Connect)

React verifies user with okta, Okta redirects back with a code, This is then shared by .NetCore which then is verified by okta.

Conquering Frontend Mentor — Challenge -

Handling Incoming Push Notifications in AWS Amplify

Working with schemas in a schemaless-ish world

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

How to make a table in React with Hooks

Learning React with TypeScript by Building an API app

Implement email authentication with React + RESTful API

Using AbortController with Fetch API and ReactJS.