React Hooks calling child component method from parent
Tags: react, javascript, functional
Published: 2021-08-25 11:13:49

For calling Child Component method from parent component in hooks we are using [React.forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref) and  [React.useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) hooks from React.

#React.forwardRef
React.forwardRef creates a React component that forwards the ref attribute it receives to another component below in the tree. This technique is not very common but is particularly useful in two scenarios:

1. [Forwarding refs to DOM components](https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
2. [Forwarding refs in higher-order-components](https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components)

React.forwardRef accepts a rendering function as an argument. React will call this function with props and ref as two arguments. This function should return a React node.

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnxmcadgo0wpdk28z25h.png)

For more information, see [forwarding refs](https://reactjs.org/docs/forwarding-refs.html).

#React.useImperativeHandle

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with [forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref):

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6bgjjb1e6dymi7rvpp4.png)

#Here comes the important part to call the child method.

Now we will just render the child component in the parent and create a ref using [React.useRef](https://reactjs.org/docs/hooks-reference.html#useref) with that the getAlert() function will be called.

```javascript
import React from "react";
const { forwardRef, useRef, useState, useImperativeHandle } = React;

// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {
  const [state, setState] = useState(0);

  const getAlert = () => {
    alert("getAlert from Child");
    setState(state => state + 1)
  };

  // The component instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({
    getAlert,
  }));

  return (
    <>
      <h1>Count {state}</h1>
      <button onClick={() => getAlert()}>Click Child</button>
      <br />
    </>
  );
});

export const Parent = () => {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click Parent</button>
    </div>
  );
};


```
Child component is rendered and a ref is created using [React.useRef](https://reactjs.org/docs/hooks-reference.html#useref) named childRef. The button we created in parent component is now used to call the child component function childRef.current.getAlert();

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqj4fhltc07zz7aylye6.png)

#Reference
[https://reactjs.org/](https://reactjs.org/)
[https://stackoverflow.com/](https://stackoverflow.com/)