React - how to determine if component is stateless/functional?

Class components are inherently stateful, but with the introduction of React hooks functional components are no longer called stateless because they can be stateful, too.

isReactComponent special property exists on React.Component since React 0.14. This allows to determine whether a component is class component.

function isFunctionalComponent(Component) {
  return (
    typeof Component === 'function' // can be various things
    && !(
      Component.prototype // native arrows don't have prototypes
      && Component.prototype.isReactComponent // special property
    )
  );
}

function isClassComponent(Component) {
  return !!(
    typeof Component === 'function'
    && Component.prototype
    && Component.prototype.isReactComponent
  );
}

Similar checks are performed in React code base.

Since components can be various things like context Provider or Consumer, isFunctionalComponent(Component) may not be equal to !isClassComponent(Component).


you can check it's prototype, for example:

function isStateless(Component) {
    return !Component.prototype.render;
}