Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In this part, we will learn about react useImperativeHandle hook. In react, Data can be passed from parent to child component using props, which is known as unidirectional data passing. In the case of props, the parent component cannot access or call a function, value from a child component directly.
In these types of cases, we want our parent component to communicate to reach to child component to get data. We can do this using react useImperativeHandle
Hook, which allows us to get the data, state, value or function from a child component to parent component through ref
. We can also decide which properties of the parent component can access the data.
useImperativeHandle(ref, createHandle, [dependencies])
Here, in this syntax, we can directly use useImperativeHandle
without constant. We will use this hook in child class because here ref
is pass down from parent component, createHandle
is variable or function name, or we can say data which we want to access in the parent component. dependencies
is the array of dependencies which will occurs to re-render.
useImperativeHandle hook is different from useRef in majorly two ways:
Let’s just understand react useImperativeHandle
with a simple example.
import React, { useRef} from 'react';
import Child from './Child';
function App() {
const ref = useRef(null);
return (
<>
<Child ref={ref}/>
<button onClick={() => ref.current.increment()}>Parent Click</button>
</>
);
}
export default App;
import React, { forwardRef, useImperativeHandle, useState} from 'react';
const Child = forwardRef((props, ref) => {
const [count, setCount] = useState(0)
useImperativeHandle(ref, ()=> ({
increment
}))
function increment(){
setCount(count+1)
}
return(
<>
{count}
<button onClick = {increment}>Child Click</button>
</>
);
})
export default Child;
Here, we have a component with the name of Child.js, in this component we have made an application which increases the value when button pressed pretty easy application isn’t it?
Now in here, we have a function in which we have created state using useState for changing value, then we have made a button in which we will call the increment function. After that, we have to put the whole logic into forwardRef
, it has two arguments props and ref.
We already know about props, also ref will work as data carrier. To export the function increment, we have used useImperativeHandle
hook and in this we have passed our function name, So if we need to access this increment function in the parent component we can use ref.
Now in parent component we have used useRef, if we want to access data from child component then we need this useRef
hook. After that, we have called Child component with ref property. Then, after we have created the another button in which we have passed the function from child component using ref.current.increment().
We can now increment the value from parent component button and also with child component button.
Check out video reference here: