Hello everyone, welcome into my my new article Where we are going to explore Pure Component in React Native.
Which is one of the fundamental ways of making React Native Components.
In React Native you can either have your components Pure or Functional.
In other cases are referred to as Container and Stateless components.
So what are these forms of React Native Components? and How can you make them.

Pure Components / Container Components

Pure components or Container Components are simply components based on React Component, they are classes, and they hold states.
In other words, Pure components are the default form react and react native components comes as.
They extend the react component class, that means that they have can have lifecycle methods, constructor etc.
They Do have state, and you can use and manipulate it using this.state and this.setState().
Pure components are well optimized, and you mainly need to use them for you React Native Screens.

Pure Component Example

export default class  App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      counter:1
    }
  }

  componentDidMount(){
    const { counter } = this.state
    setInterval(() => {
      this.setState({counter:counter + 1})
    }, 1000);
  }

  render(){
    return (
      <View style={styles.container}>
        <View style={styles.statusBar} />
        <Text>Counter : {this.state.counter}</Text>
      </View>
    );
  }

}

As you have noticed from the code above, our component is extending React.Component.
We are using the constructor method to setup our initial state.
If you are not familiar with the constructor term,
It’s an Object Oriented concept, and it’s the first function that runs when our React Component is created.
Even before the component is mounted, and it’s the perfect place to start an initial state.
Pure components also use the lifecycle methods when extending React Component.
And that’s where we are setting up an interval to update our component state every second.
And lastly, the render method, where the UI components live, here you can map all your states and logic, to have an appearance in your app screens.

Best usage cases

Pure components are best used for larger components such as screens of the app. Like settings and home screens.
You probably would need to create pure components to handle small UI representative UI pieces.
For that you can create Stateless components.

Stateless Components / Functional Components

They are the exact opposite of pure components.
Simply they are functions and do not hold a state, just the props.
They are mostly used to map props into the UI, and used for small UI representations.
Such as a Header in your app, Buttons, etc.

Stateless Component Example

const Header =({name, openDrawer})=> (
  <View style={styles.header}>
    <TouchableOpacity onPress={()=>openDrawer()}>
      <Ionicons name="ios-menu" size={32} />
    </TouchableOpacity>
    <Text>{name}</Text>
    <Text style={{width:50}}></Text>
  </View>
)

This is an example of a stateless components, with no state.
It’s a Header that takes 2 props, Screen name and openDrawer function.
It’s only used to display the props, and have no logic or calculations.

There you have it a Pure Component React Native Overview with examples.
I hope you find this article as informative as you expected, if you have any questions, please send me Your feedback.
Happy Coding.