DEV Community

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

Posted on • Edited on

3 3

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free