Search⌘ K
Home
Courses
Simplifying State Management in React Native

What Are Stateful and Stateless Components?

Learn about stateful and stateless components in React Native.

We'll cover the following...

Whether we’re completely new to the React world or have been here for a little while, we have probably heard the terms stateful and stateless components. These terms were especially useful before the introduction of hooks in ReactJS v16.8.

Stateful components

From a high-level perspective, ReactJS and React Native components are nothing more than JavaScript functions. The React library adds some specific features to those functions. One of those features is state, a special kind of component memory.

A React component that can accept state can look like this:

Javascript (babel-node)
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: "World"}
  };
  render() {
    return <Text>Hello, {this.state.name}</Text>;
  } 
}

Here, on line 7, we return a <Text> element using a dynamic part that is retrieved ...