React Native Call useEffect Only Once in Functional Component Example

In React Native class component life cycle there are 3 inbuilt functions named as componentDidMount, componentDidUpdate, and componentWillUnmount used to perform certain task on a certain condition. But in functional these three methods are not available and to perform their task here we would use useEffect() method. The useEffect method is combined part of all three componentDidMount, componentDidUpdate, and componentWillUnmount methods. The useEffect calls each time when after rendering the screen. Even if we update State or define the method it will calls every time when render calls. To stop calling useEffect after every render we have to pass Array[] as argument in useEffect method. It will prevent the useEffect method to calling automatically. To run the useEffect once we have to pass the [] Array as Second argument so this would tell the react native that there are no state or prop needs to updated so it won’t run the useEffect again. So in this tutorial we would React Native Call useEffect Only Once in Functional Component Android iOS Example Tutorial.

Contents in this project React Native Call useEffect Only Once in Functional Component Android iOS Example Tutorial:

1. Open your project’s main App.js file and import useState, useEffect from React.

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

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

2. Import Alert, View, StyleSheet, Button and Text component.

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

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

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

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

export default function App() {

}

4. Creating a State named as count with state change function named as setCount. We would also set the State value as Zero. To know more about How to use State in Functional Component read my this tutorial.

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

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

5. Creating useEffect() method and here we would set the count value as Zero again. We would also Show a alert dialog box on to see the effect on mobile screen. Now we would pass the Empty [] Array as second argument to stop useEffect to run again.

<br />
   // Similar to componentDidMount and componentDidUpdate Method.<br />
   useEffect(() => {</p>
<p>    // Set the count variable value to Zero.<br />
    setCount(0);</p>
<p>    Alert.alert(‘useEffect Called Once Only….’);</p>
<p>  }, [] );

// Similar to componentDidMount and componentDidUpdate Method.

useEffect(() => {

// Set the count variable value to Zero.

setCount(0);

Alert.alert(‘useEffect Called Once Only….’);

}, [] );

6. Creating Return Block and here we would make our Root View component and 1 Button component. We would increase value of Count to Plus +1 on every click event.

<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 in Functional Component” /></p>
<p>    </View></p>
<p>  );

return (

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

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

</View>

);

7. 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 and componentDidUpdate Method.<br />
   useEffect(() => {</p>
<p>    // Set the count variable value to Zero.<br />
    setCount(0);</p>
<p>    Alert.alert(‘useEffect Called Once Only….’);</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 in Functional Component” /></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’;

export default function App() {

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

// Similar to componentDidMount and componentDidUpdate Method.

useEffect(() => {

// Set the count variable value to Zero.

setCount(0);

Alert.alert(‘useEffect Called Once Only….’);

}, [] );

return (

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

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

</View>

);

}

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#FAFAFA’,

padding: 10

text:{

fontSize: 20,

paddingBottom: 20

}

});

Screenshots:

React Native Call useEffect Only Once in Functional Component Example

Contents in this project React Native Call useEffect Only Once in Functional Component Android iOS Example Tutorial:

Also Read :

Recent Posts

Search Here