Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Differences between `useRef` and ref variable in ReactJS

I have this

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

And this

const CompB = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

Two _input is the ref object of the input tag and I can't find the differences between them.

My question is: What are the differences between two _input and which _input is better?

like image 495
Trí Phan Avatar asked Jun 12 '19 00:06

Trí Phan


People also ask

What is the difference between refs and state variables?

What is the difference between refs and state variables? Both refs and state variables provide a way to persist values between renders; however, only state variables trigger a re-render.

Why useRef is used in React?

The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

Which cases should you use useRef?

useRef can be used to store local mutable value in a component. It doesn't participate in rerendering (unline state data). useMemo is used to memoize (like we do in Dynamic Programming, concept wise) and skip recalculation.

When should I use useRef?

The hook useRef can be used to store any value, for example, you have an object or an array or a map which you don't want to reinitialize for every single rerender you can use useRef hook. similarly, useState hook can be used to store normal state variables.

What is the difference between useref and createref in react?

useRef: The useRef is a hook that uses the same ref throughout. It saves its value between re-renders in a functional component and doesn’t create a new instance of the ref for every re-render. It persists the existing ref between re-renders. createRef: The createRef is a function that creates a new ref every time.

What is a ref In react?

What is a ref ? A ref is defined as any value that does not trigger a component re-render when it is changed. This behavior is contrary to the function of states and props. A ref can be created in two ways- by the useRef hook or by the createRef function.

What is the difference between props and ReFS in react?

Before digging into their differences, let’s see how and where we can use refs in React. In React, refs provide an escape hatch to directly access React components or DOM elements instead of through props and component state.

When to use refs instead of variables in a component?

Do not have a chain of actions that manipulate state along the way, use refs until the end of the chain. Do you mean using a variable with let outside of the component? If necessary, please give an example.


2 Answers

The two ways of defining, refs are not equivalent.

Consider the first example

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

In this example, whenever, CompA re-renders, as new variable _input is created and for instance if you have a useEffect in CompA which is meant to run on initial render and it executes something at an interval using this ref variable it would lead to inconsitencies.

Now consider second case

const CompA = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

In this case, even though the _input variable is created on each render, useRef ensures that it receives the same reference that it receives the first time and not initialise it again. useRef is the right way to define refs for functional Components. For class components you can use createRef or the callback pattern you mention

like image 52
Shubham Khatri Avatar answered Oct 16 '22 15:10

Shubham Khatri


From the docs:

This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.

In other words, useRef will keep the reference on every render/update, by changing props or state. On the other side, simple ref as variable will be erased at every component cycle.

like image 3
Pedro Arantes Avatar answered Oct 16 '22 13:10

Pedro Arantes