Fix shallow renderer not allowing hooks in forwardRef render functions

[eps1lon]

Fixes Invariant Violation: Hooks can only be called inside the body of a function component when shallow rendering a forwardRef component that uses hooks.

const SomeComponent = React.forwardRef((props, ref) => {
  const randomNumberRef = React.useRef({number: Math.random()});

  return (
    <div ref={ref}>
      <p>The random number is: {randomNumberRef.current.number}</p>
    </div>
  );
});

is valid when rendering as far as I can tell. At least it's a nice shorthand compared to declaring the function component with e.g. forwardedRef and then using an additional render function to pass the ref to forwardedRef.

[aweary]

The function passed to React.forwardRef isn't a function component (the second ref argument gives it away). I wouldn't expect Hooks to work here, though it appears to. @gaearon is this expected?

[eps1lon]

The function passed to React.forwardRef isn't a function component (the second ref argument gives it away). I wouldn't expect Hooks to work here, though it appears to. @gaearon is this expected?

I wasn't quite sure about this either since it's named render wherever I found a reference. The docs also avoid using a component name in the render function: https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools

I was somewhat happy about the reduced nesting in react-devtools compared to class components. Wouldn't like to see this pattern disappear since it's yet another intermediate component one would have to create just to get to the DOM node (or an imperative handle for that matter).

[eps1lon]

Some additional context why I thought components would be fine: The docs mention that I should use a named function to improve devtools experience. However, there's no concrete example for this (only the generic myFunction). If the render function can only be a "dumb" render function (and shouldn't hold any behavior as far as I'm concerned) then why would I want a named function here?

It was very tempting to just

React.forwardRef(function Button(props, ref) {
  // some additional behavior
  return <button ref={ref} {...props} />
});

and the devtools would show ForwardRef(Button).

This is also a neat pattern if reactjs/rfcs#107 is accepted since I can just remove the forwardRef call:

-React.forwardRef(function Button(props, ref) {
+function Button(props) {
  // some additional behavior
-  return <button ref={ref} {...props} />
+  return <button {...props} />
-});
+}

If this is actually undesired behavior that function components can be passed into forwardRef I see two possible improvements:

• add a concrete example for a named function to the docs
• trigger a warning if a named function is passed that looks like it's intended to be a function component i.e. when the name starts with a capital letter.

[gaearon]

It is intentional that Hooks work inside forwardRef and memo.

[gaearon]

Thanks

[oliviertassinari]

It is intentional that Hooks work inside forwardRef and memo.

Time to party 💃 https://twitter.com/olivtassinari/status/1106224970043219970.

[gaearon]

Fixed in 16.8.5.