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.