Dev

By Carlos Santana on
Reading time: 3 minutes

stateless-7rLon.png

In the last post Understanding local state in a Class Component, we see how the local state works in a Class component, in this post we are going to learn how to create functional components also known as stateless components.

So far, we have only learned how to create class components in React. These components are useful when we need to handle local state but in some cases, we will need to render static markup. For static markups (just HTML), we need to use functional components, also known as stateless components. This will help you to improve the performance of your application.

In the Passing props to a component and using PropTypes to validate them post, we created some layout components (Header, Content, and Footer). These components, as you may imagine, are frequently static (unless you want to have a toggle menu or some user information in the header), so in this case, we can convert them into functional components.

First, let's see how is our current Header:

import React, { Component } from 'react';
import { string } from 'prop-types';

class Header extends Component {
  // Here you can define your PropTypes.
  static propTypes = {
    title: string.isRequired,
    url: string
  };

  render() {
    const {
      title = 'My First React App',
      url = 'https://www.dev.education'
    } = this.props;

    return (
      <header className="App-header">
        <h1>
          <a href={url}>{title}</a>
        </h1>
      </header>
    );
  }
}

export default Header;
File: src/shared/components/layout/Header.js

The first thing we need to do is to convert our class component into an arrow function, and with this change, we don't need longer need to import React.Component anymore. The second part of the migration is to pass the props as parameters in the function instead of getting them from this.props, and the last step is to move our static propTypes as a node of the function. After those changes, our code should look like this:

import React from 'react';
import { string } from 'prop-types';

const Header = props => {
  const {
    title = 'My First React App',
    url = 'https://www.dev.education'
  } = props;

  return (
    <header className="App-header">
      <h1>
        <a href={url}>{title}</a>
      </h1>
    </header>
  );
};

Header.propTypes = {
  title: string.isRequired,
  url: string
};

export default Header;
File: src/shared/components/layout/Header.js

TIP: A functional component is an equivalent to just having the render method. That's why we only need to return the JSX directly.

After we migrated our Header component, we need to migrate the Footer component; this is easier because it does not have any props. First, let's see what our look like:

import React, { Component } from 'react';

class Footer extends Component {
  render() {
    return (
      <footer>© DEV Education {(new Date()).getFullYear()}</footer>
    );
  }
}

export default Footer;
File: src/shared/components/layout/Footer.js

Now our Footer as a functional component will look like this:

import React from 'react';

// We can directly return the JSX
const Footer = () => (
  <footer>© DEV Education {(new Date()).getFullYear()}</footer>
);

export default Footer;
File: src/shared/components/layout/Footer.js

In this case, as you can observe, we have to create an arrow function without parameters (because we don't have any props) and directly return the JSX.

Finally, we will convert our Content component to a functional component, this is the original Content class component:

import React, { Component } from 'react';
import { element } from 'prop-types';

class Content extends Component {
  static propTypes = {
    children: element.isRequired 
  };

  render() {
    const { children } = this.props;

    return (
      <main>
        {children}
      </main>
    );
  }
}

export default Content;
File: src/shared/components/layout/Content.js

This component is similar to our Header component. We need to pass the props as parameters and keep our propTypes.

Only members can see all the codes
You can Login or Sign Up

File: src/shared/components/layout/Content.js

As you can see even with stateless components, we can still validate our PropTypes. Remember, if you don't need any dynamic data or local state then you should consider using a functional component. This will improve the performance of your application.

A functional component not only does not have a state but also does not have the React lifecycle methods either.

avatarLeave a comment

Your comment

Only members can comment. You can Login or Sign Up