June 23rd, 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

  • Constrast CodePen Challenge banner

    November 3rd, 2020

    CodePen Challenge: Contrast

    Never lose track of your cursor again! A custom cursor is created using "mix-blend-mode: difference" which will give contrast to any image or element the user mouses over.

  • March 27th, 2020

    JavaScript ES6: The forEach() Helper

    forEach() is an ES6 helper that is used to call a function once on each item in an array and is arguably the most useful ES6 helper. Let's dig into how it works.

  • April 8th, 2020

    CodePen Challenge: Hero

    The goal here was to create a hero with at least one image. I decided to demonstrate how an image overlay can improve text readability. To show how well this works across a wide array of images, a reload button is included which keeps reloading new images from picsum!

  • November 22nd, 2019

    Friday wins much coveted Best Website Award at the Spiders

    Our award-winning team here at Friday are proud to announce that we have won the much-coveted ‘Best Website’ Award at the annual Spider Awards.

Your browser is out-of-date!

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