How do you expose imperative methods from a child component to its parent using refs?

How do you expose imperative methods from a child component to its parent using refs?

• A. Use a callback prop that the child calls to expose methods.
• B. Call the child instance methods directly via the ref without hooks.
• C. Use useContext to export child methods.
• D. Use forwardRef to pass a ref to the child and useImperativeHandle inside the child to expose methods on that ref.

Answer: (D)

The idea is to give the parent a real handle to call imperative methods on the child, and the way to do that is by forwarding a ref and shaping exactly what gets exposed. The parent creates a ref (with useRef) and passes it to the child via the ref prop. The child component must be wrapped with forwardRef so it can receive that ref. Inside the child, useImperativeHandle takes that ref and returns an object of methods you want the parent to be able to call. That object becomes ref.current in the parent, so you can call methods like ref.current.someMethod() from outside. This pattern is the correct approach because it provides a controlled, explicit API from the child to the parent, without exposing internal state or implementing direct instance access in functional components. It’s also flexible—you can expose just the methods you need and keep everything else encapsulated. Other approaches don’t offer the same stable imperative handle. A callback prop can be used for notifications, but it doesn’t give you a direct, reusable imperative interface on the parent side. Calling methods directly on a functional child’s instance isn’t available because there’s no instance to access without these wrappers. Context is great for sharing data, but it isn’t designed to expose a component’s imperative API via a ref.

The idea is to give the parent a real handle to call imperative methods on the child, and the way to do that is by forwarding a ref and shaping exactly what gets exposed. The parent creates a ref (with useRef) and passes it to the child via the ref prop. The child component must be wrapped with forwardRef so it can receive that ref. Inside the child, useImperativeHandle takes that ref and returns an object of methods you want the parent to be able to call. That object becomes ref.current in the parent, so you can call methods like ref.current.someMethod() from outside.

This pattern is the correct approach because it provides a controlled, explicit API from the child to the parent, without exposing internal state or implementing direct instance access in functional components. It’s also flexible—you can expose just the methods you need and keep everything else encapsulated.

Other approaches don’t offer the same stable imperative handle. A callback prop can be used for notifications, but it doesn’t give you a direct, reusable imperative interface on the parent side. Calling methods directly on a functional child’s instance isn’t available because there’s no instance to access without these wrappers. Context is great for sharing data, but it isn’t designed to expose a component’s imperative API via a ref.