react hook invoke child method from parent on-demand without forwardRef()

Question

in react hooks, what can i do while avoiding rewriting a child component as a forwardRef() (an example) but be able to invoke on-demand (e.g. on button click) a method in the child from the parent component.

i hope the following snippet will explain better what i would like to achieve (codesandbox).

Child.js

// Child.js

export default function Child() {
  const val = "child val";
  const getVal = () => val;
}

App.js:

// App.js

import Child from "./Child";
import { useRef } from "react";

export default function App() {
  const childRef = useRef(null);
  const onClick = () => {
    console.log(childRef.current.getVal());
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={onClick}>button</button>
    </>
  );
}

You could pass the ref through a different prop I suppose. Would that help? — Unmitigated, Mar 18 '23 at 08:12
@Unmitigated maybe, don't fully understand what you mean. do you have any example? — Mr., Mar 18 '23 at 08:13

Unmitigated · Accepted Answer · 2023-03-18T08:22:12.560

1

You can pass the ref to the child component through a separate prop.

function Child({_ref}) {
  // ...
  useEffect(() => {
    _ref.current = {getVal};
  }, [_ref]);
  return "Child content";
}
// ...
<Child _ref={childRef} />

You can also set the ref inside the child component with useImperativeHandle like so:

useImperativeHandle(_ref, () => ({getVal}), [/* dependencies */]);

edited Mar 18 '23 at 08:22

answered Mar 18 '23 at 08:16

Unmitigated

76,500
11
62
80

react hook invoke child method from parent on-demand without forwardRef()

1 Answers1