Hello, guys. In this article, I want to share with you about React and hooks, but this article is not about what are react hooks, when they were created and why we should use them. useRef forwardRef So, if you are not familiar with react hooks or with react, you should read about what is react, what is hooks, and play with simple hooks such as , , and after you can go back here. useState useEffect The purpose of is to keep variables between rerendering react components. As you know, during each render all variables and functions will recreate. And for example, if you want to keep some value during rerenders, change it only when you need it, you can use it for this purpose. useRef useRef And you can ask, why we need if we have that could keep value between rerenders and we can change this value at any time. The answer is yes, you can. But if you change your state, the component, which uses this state will rerender. Instead of , changing value doesn’t make rerender. useRef useState useState useRef Let’s check how works and then we compare and . useRef useRef useState As you can see, creating ref is almost as , but it returns just one value, without a setter. Let’s check what value will be inside our ref: useState will return an object with a property that contains an initial value, that you can pass during initialization . useRef current useRef Let’s say, we want to change our value name. You can do it really simple: Changing the name, inside ref, will not run page rerendering. Let’s compare with . I will add , with use ref changing there every 300 milliseconds: useRef useState useEffect setInterval As we can see our rendering doesn’t call every 300 milliseconds. But let’s do the same with : useState Our calls rerender every 300 milliseconds. setUserState Knowing this, if you want to keep some value, change it, but you don’t want rerenders you can use hook. It’s like a in class component, when you change some property using keyword instead of calling in class component. useRef this this this.setState() And now, let’s check an example with the most common usage of useRef on practice: Imagine that you have some editor (textarea) on the page and you want to make focus as soon, as a user sees this textarea on the page. How can you do this? In pure Javascript you can do something like: const textarea = document.querySelector(‘#editor‘); textarea.focus(); But how does it in react? For this purpose, you should use useRef and attach it to the DOM element. Let’s check an example: As you can see here, it’s really simple. You create and pass it to DOM element, using attribute ref: userRef <textarea ref={textareaRef} /> You can set ref to elements, and then works as with a simple DOM API. like, add focus, , . addEventListener removeEventListener To get access to this ref, use another hook, as you can see in the picture. In this case, you can be sure that DOM element was created. useEffect Using is more imperative way of working with DOM and in general, if you can, use react API, instead of native DOM API. But sometimes, we don’t have the ability to make something using only react API. For such cases, using ref and native DOM API is fine. useRef For example, if you use an external library, that doesn’t work with react, but you need somehow connect this library to DOM element (google maps or chart.js), and native DOM API is a good solution. Fortunately, many modern libraries have react wrappers, so you can use them. useRef Another example, if you need coordinates from some element, you can set to that element and call method. useRef getBoundingClientRect : as a ref, you can use only native DOM elements, if you put ref to your own component, it will not work. The important thing This will not work: In this example, textareaRef.current contains the default value, which is null. But what, if you want to pass this ref as a prop to the child component?  Like at the example below: Unfortunately, this also doesn’t work. But there is a solution. If you want to make a reusable component and pass ref from a parent to children, you can use . forwardRef is a HOC, that accepts components as a parameter. And, inside this component, we have access to props (the first param) and to the ref (the second param). Let’s take a look: forwardRef As you can see, is just a function, that is imported from react. This function takes a component as a param. That component has the first param is props, and the second is ref from a parent component. forwardRef And as you can see, we should also set the display name, because clears it. How to use this component from the parent? forwardRef You can use this component, which is wrapped with as a just simple component, but here, we pass ref as a prop. For example, as you can see, we created 2 and 2 . Inside useEffect you can have some conditions and decide what you want to do with any of that refs. forwarRef textarea useRef In general, that’s all that you should know before starting work with and . useRef forwardRef Try to play with both of them. In practice, it is not a very common thing that you will use, but sometimes, when react API is not enough they are really useful. Let’s summarize everything, that we know about and : useRef forwardRef is often used as a reference to some DOM element, when react API is not enough. useRef Work with ref inside to be sure that DOM element was created on the page. useEffect can be used also if you want to have a variable, that will keep some information between rendering and you don’t want to call page rerendering after changing this variable (unlike useState). useRef could be used only on native DOM elements (HTML tags). useRef if you want to pass ref as a prop to the child component, you should wrap your child component into HOC. And don’t forget to change the of your component, after using . forwardRef displayName forwardRef

Google

What is GRASP? Information Expert and Creator Principles in JavaScript 

Throttling vs Debouncing in Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Design

React useRef, forwardRef and Some Problems you May Run Into Working With Them

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Look Into my Writing Process: Interview With Serhii Rubets, Full-Stack Software Engineer

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

A Look Into my Writing Process: Interview With Serhii Rubets, Full-Stack Software Engineer

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps