React Native Stateless and Stateful Components

React Native Stateless and Stateful Components

React Native Stateless and Stateful Components are one of the main styles we could write components within our apps. The concept of stateless and stateless components comes from React Js fundamentals, and it’s very common that you have already uses it before.

What is a React Native Stateless Component

React Native Stateless Component is a React component which does not hold a state. Simply put there is no local state in it. A stateless component does not need lifecycle methods or any complexity setup.
It’s a component that only displays UI or Data it receives as a prop. It’s also sometimes referred to as a dump component.

An example of a stateless component in React native would be a heading Title Text component. it shouldn’t hold or change a state at all. I just receives the title and displays it.

Example

import React from 'react'
import { StyleSheet, Text} from 'react-native';

const HeadingTitle = ({ title }) => {
  return (
    <Text style={styles.title}>{title}</Text>
  )
}

const styles = StyleSheet.create({
  title: {
    fontWeight: 'bold',
    fontSize: 25
  }
})
export default HeadingTitle

What is a React Native Stateful Component

React Native Stateful Components are the default form of React Native components. As opposing to the stateless components, stateful components hold data and manipulate it, in addition to the lifecycle methods.

An example of the Stateful Components would be a form TextInput, where the text value changes every time the user writes new words.

Example

import React, { useState} from 'react'
import { StyleSheet, TextInput} from 'react-native';

const LoginInput = () => {
  const [ text, setText ] = usestate(null)
  return (
    <TextInput 

      onChangeText={(text) => setText(text)} />
  )
}

const styles = StyleSheet.create({
  textInput: {
    borderWidth: 1,
    borderColor: "lightgray",
    borderRadius: 10,
    height: 45,
    width: "100%",
  }
})
export default LoginInput
Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
Modern React Native Splash Screen Design UI

Modern React Native Splash Screen Design

Related Posts