Stateless Function Components in React

A stateless function component is a typical React component that is defined as a function that does not manage any state.

These functions take props as an input and return JSX as an output.

There are no constructors needed, no classes to initialize, and no lifecycle hooks to worry about.

They can be as simple as this:

const Title = ({ title }) => {
  return <h1>{title}</h1>;
};

Stateless function components are really nice to work with. I'm a big fan of them because these components have consistent output based on their inputs since they have no state or side-effects.

If you give a stateless function component a set of props it will always render the same JSX.

This differs from a stateful component where state can affect the JSX output, even if the same inputs are given.

Why Function Components?

Breaking up your React code into stateless function components can help in many ways.

It's easier to test a stateless function component since there are fewer unexpected outputs. The JSX should always be consistent when you are given an input.

You don't have to define so many things. There is significantly less boilerplate when creating function components.

Also, these components offer better readability and an easier way to create new components. Other developers can understand functions without needing to understand the inherited class methods and logic of traditional class components. In other words, no need to extend React.Component or have any knowledge around what calls the render() method.

I like this concept, but I still need states!

Now you can have the best of both worlds.

React Hooks make it possible to add state to Function Components. Check out my guide here.

Featured
Level up faster
Recommended Books
Check out my list.
One on Ones: 101
Leveraging Other People's Experience
Hey, I'm Nicholas Dill.

I help people become better software developers with daily tips, tricks, and advice.

Level up
Related Articles
More like this
A Deep Dive into the useMemo Hook in React
How to Use React's useEffect Hook
A Quick Introduction to TypeScript