Categories
React Tips

React Tips — Stateless Components and Spreading Props

Spread the love

React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps.

In this article, we’ll look at how to use stateless components to simplify our code and spreading props so we don’t have to pass them explicitly.

Stateless Components

Stateless components are components that don’t hold state. We can define stateless components with function and class components.

They only take props and render them.

They’re easy to test since we don’t have to mock and change states in order to test them.

We can define the class component that is stateless as follows:

import React from "react";

class Person extends React.Component {
  render() {
    const { firstName, lastName, age } = this.props;
    return (
      <p>
        {firstName} {lastName} {age}
      </p>
    );
  }
}

In the code above, we have the render method that render firstName , lastName , and age from the props by destructuring this.props .

Then when we add the following below Person:

export default function App() {
  return (
    <>
      <div>
        <Person firstName="Jane" lastName="Smith" age={20} />
      </div>
    </>
  );
}

We’ll see Jane Smith 20 displayed on the screen.

We can make stateless components a lot simpler with function components. For instance, we can rewrite Person as a function component as follows:

import React from "react";

const Person = ({ firstName, lastName, age }) => {
  return (
    <p>
      {firstName} {lastName} {age}
    </p>
  );
};

In the code above, we have a React function component. The first parameter has our props. We destructured the prop’s properties into individual variables.

Then we return them in immediately in the p element.

This is a lot simpler and we also saved a lot of typing by eliminating lots of boilerplate code that class-based components need to have.

Spreading Props as we Pass Them

To make passing lots of props cleaner, we can use the spread operator to spread them so that we don’t have to pass props by writing them all out explicitly.

For instance, we can write the following code to do that:

import React from "react";

const person = {
  firstName: "Jane",
  lastName: "Smith",
  age: 20
};

const Person = ({ firstName, lastName, age }) => {
  return (
    <p>
      {firstName} {lastName} {age}
    </p>
  );
};

export default function App() {
  return (
    <>
      <div>
        <Person {...person} />
      </div>
    </>
  );
}

In the code above, we have the person object. We want to pass in the properties of person as props. In the code above, we passed in the firstName , lastName and age prop by spreading the person object as follows:

<Person {...person} />

Then the Person prop, will pick up the values of firstName , lastName , and age and render them in the p element of Person .

This is much cleaner than writing them out one by one as follows:

import React from "react";

const person = {
  firstName: "Jane",
  lastName: "Smith",
  age: 20
};

const Person = ({ firstName, lastName, age }) => {
  return (
    <p>
      {firstName} {lastName} {age}
    </p>
  );
};

export default function App() {
  return (
    <>
      <div>
        <Person
          firstName={person.firstName}
          lastName={person.lastName}
          age={person.age}
        />
      </div>
    </>
  );
}

As we can see:

<Person
  firstName={person.firstName}
  lastName={person.lastName}
  age={person.age}
/>

is a lot longer than:

<Person {...person} />

In the shorter version, we didn’t have to reference person and the prop names in every line. It’s way shorter and saved us lots of typing, and they do the same thing.

Deduplicate Our Components

If we have code that’s very similar to each other, we should find a way to deduplicate them. For instance, the following code has lots of duplicate code:

import React from "react";

const Person = ({ firstName, lastName, age }) => {
  return (
    <p>
      {firstName} {lastName} {age}
    </p>
  );
};

export default function App() {
  return (
    <>
      <div>
        <Person firstName="John" lastName="Smith" age={20} />
        <Person firstName="Jane" lastName="Smith" age={20} />
      </div>
    </>
  );
}

In the code above, we have:

<Person firstName="John" lastName="Smith" age={20} />
<Person firstName="Jane" lastName="Smith" age={20} />

which is mostly overlapping code except for the value of the firstName prop.

We can clean that up by creating another component that has shared parts in one place. For example, we can write the following code to do that:

import React from "react";

const common = {
  firstName: "Jane",
  lastName: "Smith",
  age: 20
};

const Person = ({ firstName, lastName, age }) => {
  return (
    <p>
      {firstName} {lastName} {age}
    </p>
  );
};

const FamilyMember = ({ firstName }) => {
  return <Person {...common} firstName={firstName} />;
};

export default function App() {
  return (
    <>
      <div>
        <FamilyMember firstName="John" />
        <FamilyMember firstName="Jane" />
      </div>
    </>
  );
}

In the code above, we have the FamilyMember component, which has the common object’s properties set as props to eliminate the duplicate prop values, then we reference FamilyMember in App , which only has common props in one place.

Then we get:

John Smith 20

Jane Smith 20

displayed on the screen. Putting the code in one makes changing it easier even though it may not be the shortest way in this case.

Conclusion

We should use stateless components wherever we can to reduce the burden of testing. They’re also simpler.

Also, we can spread props into components so that we don’t have to write them all out.

Finally, if we have components with lots of common props, we should eliminate the duplicates by putting them all in one component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *