profile
viewpoint

Ask questionsBug: function component cannot have ref property

When passing ref property to a function component, validateFunctionComponentInDev shows a warning about it being a bad thing.

React version: HEAD

While this might have been true for stateless function components (as many places refer to func components), probably since the introduction of hooks, they can have state, and I had the impression that one could rewrite any class component into a function based one.

function TestComponent({ref}) {
  const [state] = React.useState({
    stateField1: 42,
  });
  assignRef(ref, state);
  return (
    <div>
      { state.stateField1 }
    </div>
  );
}

This code wont work, caller would never be able to get The Answer. Caller is sad.

The current behavior

React giving a warning and making the ref prop defunct.

The expected behavior

Remove limitation and let ref on my function component live happily ever after.

facebook/react

Answer questions vkurchatkin

Oh, that's right, forwardRef is a misnomer, it's just the way to access ref property within your component. If you name it differently, say myRef, you don't need forwardRef and can just use seImperativeHandle

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List