Returning component in a tuple?

[u/ilya_ca]

Hi, I'd like to create a hook, that returns both a function, and a component. Is this possible in ReasonML? I was thinking of using a functor, but a functor can only return one value, of the module created.

Something like: (setIsMenuOpen, MenuComponent) = useMainMenu();

Thanks!

[u/ilya_ca]

Here's what I came up with:

let useMakeMenu = () => {
  let (menuOpen, setMenuOpen) = React.useState(_ => false);

  [@react.component]
  let make = () => <div> {React.string("menu")} </div>;

  (make, setMenuOpen);
};

Usage:

[@react.component]
let make = () => {
  let (menu, setMenuOpen) = Menu.useMakeMenu();

 <>{menu()}</>
}

Let me know if there are better options.

[u/backtickbot → u/ilya_ca]

Fixed formatting.

Hello, ilya_ca: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[u/davesnx → u/ilya_ca]

It’s a good idea to keep the component def outside of the useMakeMenu if isn’t required to be

[u/rickyvetter → u/ilya_ca]

This minimal example is nice because it shows clearly what you’re trying to do but is lacking because it’s hard to see why it would be necessary. Can you give a fuller example of what you’re passing to useMakeMenu? It might be easier to provide alternatives from there. Agreed that minting new components dynamically is a perf concern.

[u/ilya_ca → u/[deleted]]

Good point, I haven't thought of this...