June 2020

React: Stateless Functional Components

When creating React components, sometimes we find ourselves in a situation where we are creating large components just to output some HTML. This is usually overkill. Instead, we can use something called a Stateless Functional Component.

A Stateless Functional Component is a component that typically only contains a render method, which returns HTML, and prop types.

// Standard component
class Header extends React.Component {
  render() {
    return (
      <header>
        <h1 className="title">{this.props.title}</h1>
      </header>
    )
  }
}

In the example above, we’re outputting a basic snippet of HTML with a single prop. There’s nothing wrong with writing it out that way but we end up writing a bunch of unnecessary code which can make it more difficult to read and bumps up our codes line count.

Follow the example above, first we’ll convert our component into ES5 and then refactor it to ES6.

// ES5
function Header(props) {
  return (
    <header>
      <h1 className="title">{props.title}</h1>
    </header>
  )
}

An important change to not is on our prop. Since we are no longer using a Class to create the component, the keyword this is no longer used. Instead, we pass props into the function argument Header(props). Very handy for those who find the this keyword to be a bit confusing!

Great, we have our Stateless Functional Component working! There’s more we can do here to make it more readable and whittle down our code a bit.

First, we can turn our function into an arrow function.

// ES6 arrow function
const Header = (props) => {
  return (
    <header>
      <h1 className="title">{props.title}</h1>
    </header>
  )
}

We can take this further with an implicit return by removing the need for the return keyword. This is possible since, by default, an arrow function will render a return on whatever appears within its parentheses.

// ES6 arrow function implicit return
const Header = (props) => (
  <header>
    <h1 className="title">{props.title}</h1>
  </header>
);

We can take this EVEN FURTHER with Destructuring the props into their own variables. We can add curly braces in the function’s arguments with the name of our prop. Next, we can remove props. from where we print out the prop.

// ES6 Destructuring
const Header = ({ title }) => (
  <header>
    <h1 className="title">{title}</h1>
  </header>
);

If you’re interested in some further reading about Destructuring in ES6, here’s an article I wrote on the basics.

Wrapping Things Up

Stateless Functional Components are a great way to improve our code readability, length, and performance if we know our component will only contain HTML and props.

A pitfall to watch out for would be that if you’re at the start of a project and you don’t know if that component will contain more than props and HTML then it’s best to use a regular component.

However, if you’re at the end of a project or you know for sure the component only needs HTML and props then Stateless Functional Component is the way to go!


Continue Reading

  • April 2020

    JavaScript ES6: The map() Helper

    The map() helper is used when we want to modify a list of data. When map() is finished running, it creates and populates a new array with the results. Let's see how it works!

  • Robots blog banner

    July 2020

    Using robots.txt to prevent staging sites from indexing

    Going over the basics of the robots.txt and the solution to prevent your staging site from being indexed.

  • March 2020

    Creating Interactive Accordions using jQuery

    Accordions are useful interface elements that, when clicked, will expand or condense the information on a web page. In this article, I will provide examples on how to create accordions and nested accordions using jQuery, and explain when you might want to use accordions.

  • March 2020

    5 Tips for Staying Productive While Working from Home

    For many of us, myself included, this will be your first experience working away from the office. To help you cope with the change, I've prepared 5 tips for staying productive while working from home.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now