Use useEffect as componentdidmount behavior in React Native Hooks Example

componentdidmount() method used in react native class component coding structure. In react native class component the componentdidmount() called after render() method called. The main purpose of componentdidmount() is to parse JSON or do some changes on screen after application start. After coming of react native functional component all the mount methods is replaced with single useEffect() method. The single useEffect() method can works as all the mounting methods. So in this tutorial we would learn about How to Use useEffect as componentdidmount behavior in React Native Hooks Android iOS Example Tutorial.

Contents in this project How to Use useEffect as componentdidmount behavior in React Native Hooks Android iOS Example Tutorial:

1. Open your project’s main App.js File and import useState, useEffect from react in your project .

<br />
import React, { useState, useEffect } from ‘react’;

1	import React, { useState, useEffect } from ‘react’;

2. Import Alert, View, StyleSheet, Button and Text component in your project.

<br />
import { Alert, View, StyleSheet, Button, Text } from ‘react-native’;

1	import { Alert, View, StyleSheet, Button, Text } from ‘react-native’;

3. Create our main export default function App(). This is our main Root functional component.

<br />
export default function App() {</p>
<p>|

export default function App() {

4. Creating a State named as count with State changing function named setCount. We would also set the count State default value as Zero.

<br />
  const [count, setCount] = useState(0);

1	const [count, setCount] = useState(0);

5. Creating useEffect() method. We would pass empty array as argument in useEffect() function to execute this function once only. Using this it works same as componentdidmount.

<br />
   // Similar to componentDidMount.<br />
   useEffect(() => {</p>
<p>    // Set the count State Value to Seven.<br />
    setCount(7);</p>
<p>    Alert.alert(‘useEffect Called As componentDidMount’);</p>
<p>  }, [] );

// Similar to componentDidMount.

useEffect(() => {

// Set the count State Value to Seven.

setCount(7);

Alert.alert(‘useEffect Called As componentDidMount’);

}, [] );

Screenshot:

6. Creating return block. Here we would make a Text component and Button component and change the State value on button click.

<br />
  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.text}> Count Value = {count} </Text></p>
<p>      <Button onPress={() => setCount(count + 1)} title=”Change State Value” /></p>
<p>    </View></p>
<p>  );

return (

<Text style={styleSheet.text}> Count Value = {count} </Text>

<Button onPress={() => setCount(count + 1)} title=“Change State Value” />

</View>

);

7. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#FAFAFA’,<br />
    padding: 10<br />
  },</p>
<p>  text:{<br />
    fontSize: 20,<br />
    paddingBottom: 20<br />
  }</p>
<p>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#FAFAFA’,

padding: 10

text:{

fontSize: 20,

paddingBottom: 20

}

});

8. Complete Source Code for App.js file:

<br />
import React, { useState, useEffect } from ‘react’;</p>
<p>import { Alert, View, StyleSheet, Button, Text } from ‘react-native’;</p>
<p>export default function App() {</p>
<p>  const [count, setCount] = useState(0);</p>
<p>   // Similar to componentDidMount.<br />
   useEffect(() => {</p>
<p>    // Set the count State Value to Seven.<br />
    setCount(7);</p>
<p>    Alert.alert(‘useEffect Called As componentDidMount’);</p>
<p>  }, [] );</p>
<p>  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.text}> Count Value = {count} </Text></p>
<p>      <Button onPress={() => setCount(count + 1)} title=”Change State Value” /></p>
<p>    </View></p>
<p>  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#FAFAFA’,<br />
    padding: 10<br />
  },</p>
<p>  text:{<br />
    fontSize: 20,<br />
    paddingBottom: 20<br />
  }</p>
<p>});

import React, { useState, useEffect } from ‘react’;

import { Alert, View, StyleSheet, Button, Text } from ‘react-native’;