Change:
// Proceed under the assumption that this is a function component workInProgress.tag = FunctionComponent; value = finishHooks(Component, props, value, context); <ins> reconcileChildren(null, workInProgress, value, renderExpirationTime); </ins> if (__DEV__) { <del> if (Component) { warningWithoutStack( !Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a function component.', Component.displayName || Component.name || 'Component', ); } if (workInProgress.ref !== null) { let info = ''; const ownerName = ReactCurrentFiber.getCurrentFiberOwnerNameInDevOrNull(); if (ownerName) { info += 'nnCheck the render method of `' + ownerName + '`.'; } </del> <ins> validateFunctionComponentInDev(workInProgress, Component); } return workInProgress.child; } } </ins> <del> let warningKey = ownerName || workInProgress._debugID || ''; const debugSource = workInProgress._debugSource; if (debugSource) { warningKey = debugSource.fileName + ':' + debugSource.lineNumber; } if (!didWarnAboutFunctionRefs[warningKey]) { didWarnAboutFunctionRefs[warningKey] = true; warning( false, 'Function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s', info, ); } } </del> <ins> function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { if (Component) { warningWithoutStack( !Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a function component.', Component.displayName || Component.name || 'Component', ); } if (workInProgress.ref !== null) { let info = ''; const ownerName = ReactCurrentFiber.getCurrentFiberOwnerNameInDevOrNull(); if (ownerName) { info += 'nnCheck the render method of `' + ownerName + '`.'; } let warningKey = ownerName || workInProgress._debugID || ''; const debugSource = workInProgress._debugSource; if (debugSource) { warningKey = debugSource.fileName + ':' + debugSource.lineNumber; } if (!didWarnAboutFunctionRefs[warningKey]) { didWarnAboutFunctionRefs[warningKey] = true; warning( false, 'Function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s', info, ); } } </ins> <del> if (typeof Component.getDerivedStateFromProps === 'function') { const componentName = getComponentName(Component) || 'Unknown'; </del> <ins> if (typeof Component.getDerivedStateFromProps === 'function') { const componentName = getComponentName(Component) || 'Unknown'; </ins> <del> if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) { warningWithoutStack( false, '%s: Function components do not support getDerivedStateFromProps.', componentName, ); didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true; } } </del> <ins> if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) { warningWithoutStack( false, '%s: Function components do not support getDerivedStateFromProps.', componentName, ); didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true; } } </ins> <del> if ( typeof Component.contextType === 'object' && Component.contextType !== null ) { const componentName = getComponentName(Component) || 'Unknown'; </del> <ins> if ( typeof Component.contextType === 'object' && Component.contextType !== null ) { const componentName = getComponentName(Component) || 'Unknown'; </ins> <del> if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) { warningWithoutStack( false, '%s: Function components do not support contextType.', componentName, ); didWarnAboutContextTypeOnFunctionComponent[componentName] = true; } } </del> <ins> if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) { warningWithoutStack( false, '%s: Function components do not support contextType.', componentName, ); didWarnAboutContextTypeOnFunctionComponent[componentName] = true; </ins> } <del> reconcileChildren(null, workInProgress, value, renderExpirationTime); return workInProgress.child; </del> } }

Discussion:
<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? Bug What is the current behavior? Attempting to assign a ref to a component wrapped in does not produce a friendly error message. Attempting the same thing with a functional component not wrapped in memo gives a descriptive error ("Warning: Function components cannot be given refs. Attempts to access this ref will fail."). If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: I trust this is not needed for this case What is the expected behavior? The same error message as with a non-memo functional component should be displayed. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? 0