How to `forwardRef`?

[i-am-the-slime]

I'd like to create ReactComponents which can take a ref prop or that are defined with React.forwardRef somehow. Do you have an idea how to do that?

[maddie927]

I tried to implement it and it got really messy. I'd probably just do it in FFI for now, unless you have an idea how to do it.

[maddie927]

The problem was I either needed to add it to every component or duplicate the 3 or 4 component creation function almost exactly but with the ref in the types. Maybe having just one would be better than nothing.. I was hoping I'd come up with a better way to do it.

[i-am-the-slime]

I tried in FFI and I'm not quite there yet. Do you have any leftovers?

[maddie927]

I don't think I saved the code. The simplest thing would be something like

foreign import mkForwardRefComponent ::
  forall props a.
  String ->
  ({| props } -> Ref a -> JSX) ->
  Effect (ReactComponent { ref :: Ref a | props })

exports.mkForwardRefComponent = (displayName) => (renderFn) => () => {
  const component = (props, ref) => renderFn(props)(ref);
  component.displayName = displayName;
  return React.forwardRef(component);
};

Something like that.. it's a little more complicated if you want hooks

[maddie927]

(edited a few times, sorry, I think it works now)

[maddie927]

This might work for hooks.. it's a little hacky, haven't tested:

foreign import mkForwardRefComponent ::
  forall props a hooks.
  String ->
  ({| props } -> Ref a -> Render Unit hooks JSX) ->
  Effect (ReactComponent { ref :: Ref a | props })

exports.mkForwardRefComponent = (displayName) => (renderFn) => () => {
  const component = (props, ref) => renderFn(props)(ref)();
  component.displayName = displayName;
  return React.forwardRef(component);
};

[i-am-the-slime]

Thanks so much, I was fiddling in parallel and got something to somewhat work. I somehow thought the Ref needed to be typed more like (Nullable (Ref (Nullable Node))) :

foreign import forwardRef 
  :: forall props. 
    EffectFn2 {|props} (Nullable (Ref (Nullable Node))) JSX ->
    ReactComponent { ref :: Nullable (Ref (Nullable Node)) | props }

[maddie927]

If you use it as a prop to a DOM element it does, but they can be anything. Holding arbitrary values, used with useImperativeHandle (which would be a nightmare to type all on its own 😅), etc

[i-am-the-slime]

Wow, I knew that in general they could be anything, but I assumed that for passing them with forwardRef they'd be monomorphised to Node stuff. Thanks for showing me useImperativeHandle. Alright, I think you're right and I will just write my own FFI in the project itself!

[maddie927]

Ok, I think we can just leave this open until it's supported somehow in case anyone else is wondering