DEV Community

Cover image for Understanding React stateless components
Viral Patel
Viral Patel

Posted on

3 1

Understanding React stateless components

Since React v14, a simpler way was introduced to define stateless functional components. These components use plain Javascript functions. With React 16.6+, you can declare "pure" functional components via React.memo

The simplest way to define a stateless component is to write a Pure Javascript function.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

Here's why React's stateless components are amazing,

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props. Consider the following function:

function sum(a, b) {
  return a + b
}

Here's an anti-pattern

function withdraw(account, amount) {
  account.total -= amount
}

No Class Needed

Plain functions are generally preferable over ES6 classes and eliminating the class-related cruft like extends and the constructor in the example above a nice win.

No this keyword

The entire component becomes easier to understand without the this keyword. All the annoying and confusing quirks with Javascript's this keyword can be avoided.

Dumping classes eliminates the need for calling bind to pass the this context around. Given how confusing Javascript's this keyword is to many developers, avoiding it is a nice win.

Enforced Best Practices

Stateless functional components are useful for dumb components. Presentational components focus on the UI rather than behavior so it's important to avoid using state in presentational components. Instead, the state should be managed by higher-level "container" components, or via state management libraries like Redux.

Stateless components don't support state or lifecycle methods. This is a good thing. Why? Because it protects from laziness. Stateless functional components programmatically enforce keeping the component pure. You're forced to put state management where it belongs: in higher-level container components.

Easy to Understand

When you see a stateless functional component, you know it's simply a function that takes props and spits out HTML. It's a pure function.

Easy to Test

Since it is a pure function, your assertions are very straightforward: Given these values for props, I expect it to return this markup.

Performance

Finally, stateless functional components offer improved performance as well. Since there are no state or lifecycle methods to worry about.

To consider downsides of using React's stateless components, visit this link

This blog was originally published on my personal blog Viral Patel

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay