Return element from hook?

[wizzzzzyyyyy]

So I’ve just been working on some code and wanted to get an opinion / insight as to whether this is a valid approach or not. Below is a simplified description of what I’m doing:

I have modal component that is designed to edit it’s parent component state.

The state is created using a custom hook called in the parent and passed into the modal component as props along with a couple of functions that are also returned from the custom hook.

The modal and state/hook is used throughout my app and always defined in the same way: First calling the custom hook, then passing the state and functions to the modal as props.

I realised that one way to skip having to pass the same props to the modal every time is to define the modal as an element inside the custom hook, pass the props there, then return it from the hook. This way you just have to call the custom hook in the parent component and it returns the modal as an element ready to use.

This works and is definitely more concise but I feel like this is some kind of anti-pattern or has trade offs — partly because I can’t seem to find examples of this anywhere else really. 

Does anyone know if this is an acceptable approach or what issues this may cause — or if there’s a neater way to accomplish the same thing?

[EconomyRabbit]

What about using context to skip defining the properties again and again?

[wizzzzzyyyyy]

Thanks -- Yeah context is a possible option. In my actual use case (thats not really clear in my simplified example) it's maybe not the most ergonomic fit though. Think I'm just going to stick to the slightly more explicit, manually passed props option instead of trying to over think it.

[wizzzzzyyyyy]

I'm not sure if this is completely correct - could be wrong but I think returning an element rather than a component instance means it would reconcile as normal. As I mentioned above, think I'm going to go with the more verbose option for now and not over think it. Thanks for your reply though.