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?
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.
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.
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.
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.
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 ? 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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With