How forwardRef and useImperativeHandle can help build Component reusability.

There are a number of times we come across a situation like we define our handler in the parent component. But the problem arises in maintainability and reusability. It breaks the most important rule of Object-Oriented Programming encapsulation.

Sometimes you want to distribute your component to another person or you want to use it for another project. In that case, you probably will focus more on component reusability. By keeping handlers, in the same component, you can enhance the reusability feature.

forwardRef helps you pass the reference to the child component and you can access the properties of any of the tags, but with the help of useImperativeHandle you can also get access to the child methods. I am adding some code snippets to help you understand.

The Topbar component is the parent component, the idea is to open the modal directly from this component.

The child component is shown below which is a modal.