DEV Community

Discussion on: New React Hooks Pattern? Return a Component

View post

Replies for: Hi Andrew, Nice writeup. Question: How is the hook not creating a new Component each time the hook function executes exactly? Is it because the Pan...

Collapse
 
droopytersen profile image
Andrew Petersen •

Yup exactly. The hook doesn't create an instance of the Panel component. The hook passes back a component definition and the props that should be passed to that component when an instance is created.

There isn't a ton of value in sending back the component definition, but it eliminates an import and I like that it takes the guess work out of which component I should use. It feels kind of like the Compound Component pattern

Collapse
 
gillibrand profile image
Jay Gillibrand •

I think you could safely:

return {
  Panel: <Panel {...panelProps}/>,
  // others
}
Enter fullscreen mode Exit fullscreen mode

That creates a new Panel element, but doesn't redefine the Panel function (the component definition). The problem in the linked Reddit post is that defines its component, Modal, in the hook itself.

If you did this, your hook would need to accept any children of the panel, but wouldn't need to export panelProps. So it may or may not be syntactic a win. But it should perform the same, right?