DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React - Stateless function
Sandro Jhuliano Cagara
Sandro Jhuliano Cagara

Posted on • Updated on

React - Stateless function

Stateless functions are a brilliant way to define highly reusable components. They don't hold state; they're just functions.

const MyExample = () => <div>Hello World!</div>
Enter fullscreen mode Exit fullscreen mode

They get passed props and context.

const MyExample = (props, context) => {
    return <div style={{color: context.color}}>Hi {props.name}</div>
}
Enter fullscreen mode Exit fullscreen mode

They can define local variables, where a function block is used.

const MyExample = (props, context) => {
    const style = {
        fontWeight: "bold",
        color: context.color,
    }

    return <div style={style}>{props.name}</div>
}
Enter fullscreen mode Exit fullscreen mode

But you could get the same result by using other functions.

const getStyle = context => ({
    fontWeight: "bold",
    color: context.color,
})

const MyExample = (props, context) => {
    return <div style={getStyle(context)}>{props.name}</div>
}
Enter fullscreen mode Exit fullscreen mode

They can have defined defaultProps, propTypes and contextTypes.

MyExample.propTypes = {
    name: PropTypes.string.isRequired
}

MyExample.defaultProps = {
    name: "Guest"
}

MyExample.contextTypes = {
    color: PropTypes.string
}
Enter fullscreen mode Exit fullscreen mode

Latest comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!