Props, State, and Hooks

Introduction

In this tutorial, we will look at how to customize the components and make them interactive. In general, while developing, we will use these components (built-in and user-defined), props state, and hooks together to create a stunning mobile app. We will briefly discuss and implement the code for each of the above, one by one.

Props

Props, short form for Properties are the parameters for components. They are the easiest way to customize it at the time of creation.

For Instance: In Text(core component), style is a prop provided by React Native.

The only thing to remember is that we can pass data or functions as props. With props and core components combined, we can create a wide variety of stunning visuals for our app by reutilizing one component with different props as parameters whenever required.

Let us look at a simple example

Example

Code

import React from 'react';

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

function Mycomponent(props){

return(

<Text style={styles.textstyle}>

Hello {props.addtext}

</Text>

);

}

export default function App() {

return (

<View style={styles.cv}>

<Mycomponent addtext="From 1st Prop" />

<Mycomponent addtext="From 2nd Prop" />

</View>

);

}

const styles = StyleSheet.create({ viewstyle:{ flex:1, margin:10 },

textstyle: {fontSize:18,backgroundColor: '#f50057',marginBottom: 10,color:'#ffffff',padding:10,textAlign: 'center',borderRadius:20},

cv:{

marginBottom:15

}

});

Get full private Gist

Explanation

In the above code snippet, we have customized core ReactNative component MyComponent that takes prop 'addtext' as a parameter. It is a fundamental principle concept provided by React that ensures code reusability. MyComponent is a customized component that can be used anywhere within the app using the import statement

State and Hooks

State

We use a state for the data that is going to change over time. Consider state as mutable while props immutable in a React Native App.

Hooks

Hooks in React are functions that allow developers to use React state and a component's lifecycle methods in a functional Component. React provides a few built-in Hooks like useState and use effect. Developers can also create their Hooks to re-use the stateful behavior between different components. It provides an API to ReactNative concepts such as props, state, context, refs, and lifecycle.

Example

Code

import React, { useState } from 'react';

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

export default function App() {

const [name, setName] = useState('');

return (

<View style = {styles.viewstyle}>

<TextInput

style={{height: 40, padding:20,margin:15}}

placeholder="Type Anything! "

onChangeText={name => setName(name)}

/>

<Text style={styles.textstyle}>{name}</Text>

</View>

);

}

const styles = StyleSheet.create({

viewstyle:{flex:1,margin:10 },

textstyle: {

fontSize:18,

backgroundColor: '#f50057',

marginBottom: 10,

color:'#ffffff',

padding:10,

textAlign: 'center',

borderRadius:20},

});

Get Full Private Gist

Explanation

In the above code snippet, We import a hook, UseState provided by the React library to manage the state. We have declared a state called name whose initial value is assigned to be null and attached a method called setName that updates its state value every time the input text is changed. The above is a typical coding style to implement a hook in React Native.

Difference between Props and State and When to use what?

Props, in general, are immutable and are fixed throughout the lifetime of the component. State, on the other hand, is mutable and can be changed at any time in the future.

Summary

In this tutorial, we learned the following things:

1. We briefly discuss Props State and Hooks and compare the difference between components Props and State.

2. We implemented the code by creating a short application that demonstrates the working of the Props, State, and Hooks.