Call child method from parent

javascript

react

refs

forwardref

byAnton Shumikhin·Jan 1, 2025

One option to accomplish this is through React refs. By attaching a ref to the child component, you can then reference that component and call the method via this ref.

class Parent extends React.Component {
  // Step 1. Create a ref
  childRef = React.createRef();

  // Step 2. Use the ref to call the method
  callChild = () => this.childRef.current.childMethod();

  render() {
    return (
      <>
        {/* Step 3. Assign the ref to the child */}
        <Child ref={this.childRef} />
        <button onClick={this.callChild}>Call Child</button>
        {/* 📞👦 "Hey, kiddo! Do your method magic!" */}
      </>
    );
  }
}

class Child extends React.Component {
  childMethod = () => console.log("Child method, reporting for duty!");
  render() { return <div>I'm the child component</div>; }
}

For situations when the child component is a functional one, use the hooks forwardRef and useImperativeHandle:

const Child = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => console.log("Child method, reporting for duty!")
    /* Magic trick performed! 🪄✨ */
  }));

  return <div>I'm the child component</div>;
});

Employing refs and forwardRef

refs are necessary to provide access to the instance of a functional child component in the parent. Once this instance is exposed, you can then begin calling the child's methods through the parent. On the other hand, forwardRef allows you to forward this ref attribute to the child component. The hook useImperativeHandle refines the instance value to ensure only certain operations are accessible from the parent's side.

Advancement through callbacks

One communication strategy between parent and child components is through callback functions. These can be passed down to the child component as props and invoked whenever necessary. They are especially useful in cases where you wish to respond to user interactions or specific lifecycle events.

Managing mount and unmount

The useEffect hook guarantees that cleanup procedures are followed, thus preventing potential risks during mount and unmount events. This approach ensures consistent parent-child interaction and helps avoid potential memory leaks or misdirected state updates.

Navigating the code: Functional components

Let's face it - functional components are like that quiet kid in the park. They don't have instances and you can't directly call methods on them! That's when we bring in our secret tools - forwardRef and useImperativeHandle. These hooks allow us to mimic that parent-child interaction as if the functional component was a class component with instance methods.

Effective communication: Using props

As a parent (or coder), communication is key. Through props, you can facilitate a healthy conversation between the parent and child components without directly calling methods. This aligns closely with React's fundamental data flow philosophy, where data trickles down the component tree via props like cascading pearls of wisdom.

Implement side effects responsibly: useEffect

The useEffect hook is our guardian angel, that ensures that the child method is invoked based on state or props changes. But remember - with great power comes great responsibility! Never forget to use dependency arrays to control when the side effects should be engaged.

Charting alternative courses: Context API & HOCs

Just like a family, sometimes you need to escalate a matter to the grandparents! In coding, that would mean turning to the Context API or working with High-order components (HOCs), like the connect() function from Redux.

Design and refactor while keeping data under wraps

If direct method calls are starting to feel like an overused crutch, perhaps it's time to refactor. React components should ideally be self-contained, and actions should be triggered using context or state lifts, rather than relying on refs.

Like private state data, refs should be treated as a closely guarded secret to be used sparingly. So remember, use them wisely!

explain-codes / Javascript / Call child method from parent

Linked

How to use componentWillMount() in React Hooks?



How to manually trigger click event in ReactJS?



Componentdidmount equivalent on a React function/Hooks component?



How can I update the parent's state in React?



How to call loading function with React useEffect only once