Stateless functions are a great way to define highly reusable components.
They don't hold state; they're just functions.
One of the advantages of using functions includes a very clear separation of view and logic (see the first point), because there is no room for any logic. The absence of the this keyword and thus lacking the ability to add functions that do internal state handling and logic further enforces this separation.
Stateless functional components will soon offer improved performance as well.
Since there’s no state or lifecycle methods to worry about, the React team plans to avoid unnecessary checks and memory allocations in future releases.
import {PropTypes, ContextTypes} from "react";
const Greeting = () => <div>Hi there!</div>;
// They get passed props and context
const Greeting = (props, context) =>
<div style={{color: context.color}}>Hi {props.name}</div>;
// They can define a local variable, when a function block is used.
const Greeting = (props, context) => {
const style = {
fontWeight: "bold",
color: context.color
};
return <div style={style}>{props.name}</div>
};
// But you could get the same result by using other functions.
const getStyle = context => ({
fontWeight: "bold",
color: context.color
});
const Greeting = (props, context) =>
<div style={getStyle(context)}>{props.name}</div>;
// They can have defined defaultProps, propTypes and contextTypes.
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
Greeting.defaultProps = {
name: "Guest"
};
Greeting.contextTypes = {
color: PropTypes.string
};