DEV Community

Discussion on: New React Hooks Pattern? Return a Component

Collapse
 
hummingbird24 profile image
HummingBird24

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 Panel component is created outside of the hook function itself, unlike the OP's codesandbox of the reddit link you shared?

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?

Collapse
 
stoic25 profile image
Lambert M.

yeah, I really want to know this too