React – how to determine if component is stateless/functional?
I have functional/stateless component and component which inherited from React.Component:
const Component1 = () => (<span>Hello</span>)
class Component2 extends React.Component {
render() {
return (<span>Hello</span>)
}
}
How can I determine if component is stateless or not? Is there any official way?
isStateless(Component1) // true
isStateless(Component2) // false
you can check it’s prototype, for example:
function isStateless(Component) {
return !Component.prototype.render;
}
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).
Depends on what does one call “stateless”.
If by stateless one means “can’t have a ref” then it’s:
function isStateless(Component) {
return typeof Component !== 'string' && !Component.prototype.render
}
Update: there’s also a new PropTypes.elementType type for React components (not “elements”).
This worked for me now (React 16.12.0) to test if a component was a function.
(I needed it for dealing with whether I needed to wrap a component with React.forwardRef to avoid problems like https://github.com/yjose/reactjs-popup/issues/137)
(typeof component === "object" && typeof component.type === "function")
