Use useEffect as componentwillunmount in React Native Hooks Example

componentwillunmount() method is one of the most usable application life cycle method in react native. componentwillunmount() calls automatically in react naive before a Component or Screen is unmounted or destroyed. The main purpose of componentwillunmount() is to clean or delete any variable values, State values which will not be used again so it can delete from memory and free memory space. After coming of React Native Hooks functional component we all know there’re only single method useEffect() is used to perform all the application life cycle methods but how can we Use useEffect as componentwillunmount in React Native Hooks Android iOS App, we would learn in this tutorial. So let’s get started .

Contents in this project Use useEffect as componentwillunmount in React Native Hooks Android iOS Example Tutorial:

1. Before getting started with Coding for App we have to create an additional file named as viewText.js . So goto your react native project folder and make a new folder named as components.

2. Inside the components folder make a new JS file named as viewText.js .

3. Source code for viewText.js file.

<br />
import React, { useState, useEffect } from ‘react’;</p>
<p>import { Text, Alert } from ‘react-native’;</p>
<p>function ViewText() {</p>
<p>   useEffect(() => {</p>
<p>    // Similar to componentwillunmount.<br />
     return () => {<br />
       Alert.alert(‘useEffect Called As componentwillunmount’);<br />
     };</p>
<p>   },[] );</p>
<p>return(<br />
    <Text style= {{ fontSize: 25, color: “#000”, textAlign: ‘center’ }}> Hello Friends </Text><br />
);</p>
<p>}</p>
<p>export default ViewText ;

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

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

function ViewText() {

useEffect(() => {

// Similar to componentwillunmount.

return () => {

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

};

},[] );

return(

<Text style= {{ fontSize: 25, color: “#000”, textAlign: ‘center’ }}> Hello Friends </Text>

);

}

export default ViewText ;

Explanation: Inside this file first we’re creating useEffect() method with return block. To use useEffect() as componentwillunmount() we would make the return method in useEffect(). It will call each time when this component is un mounted from screen or application.

4. Now open our app’s main App.js file and import useState, useEffect, View, StyleSheet and Button component.

<br />
import React, { useState, useEffect } from ‘react’;</p>
<p>import { View, StyleSheet, Button } from ‘react-native’;

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

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

5. Importing ViewText component from viewText file.

<br />
import ViewText from ‘./components/viewText’ ;

1	import ViewText from ‘./components/viewText’ ;

6. Creating our main export default function App(). This is our main Root Screen.

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

export default function App() {

}

7. Creating a State named as visible with setVisible State value change method. We would set the State value as True to by default display the Component on screen.

<br />
  const [visible, setVisible] = useState(true);

1	const [visible, setVisible] = useState(true);

8. Creating another State named as buttonText with setbuttonText State value change function. Using this State we would change the Text which shows the component show and hide status.

<br />
  const [buttonText, setbuttonText] = useState(‘Hide Text Component’);

1	const [buttonText, setbuttonText] = useState(‘Hide Text Component’);

9. Creating a function named as Control. Inside this function we would simply change the State value using Toggle method. This would make the Component hide and display from screen.

<br />
  const Control = () =>{</p>
<p>    if(visible == true)<br />
    {<br />
      setVisible(false);<br />
      setbuttonText(‘Show Text Component’);<br />
    }<br />
    else<br />
    {<br />
      setVisible(true);<br />
      setbuttonText(‘Hide Text Component’);<br />
    }<br />
  }

const Control = () =>{

if(visible == true)

{

setVisible(false);

setbuttonText(‘Show Text Component’);

}

else

{

setVisible(true);

setbuttonText(‘Hide Text Component’);

}

10. Creating the return block and here we would first make a Root View component and then using the Curly brackets and ternary operator we would show and hide the component.

<br />
  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      {<br />
          // Pass View or Component inside the curly bracket.</p>
<p>          visible ? <ViewText /> : null<br />
      }</p>
<p>      <Button title={buttonText} onPress={Control} /></p>
<p>    </View></p>
<p>  );

return (

{

// Pass View or Component inside the curly bracket.

visible ? <ViewText /> : null

}

</View>

);

11. 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>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#FAFAFA’,

padding: 10

}

});

12. Complete Source Code for App.js file:

<br />
import React, { useState, useEffect } from ‘react’;</p>
<p>import { View, StyleSheet, Button } from ‘react-native’;</p>
<p>import ViewText from ‘./components/viewText’ ;</p>
<p>export default function App() {</p>
<p>  const [visible, setVisible] = useState(true);</p>
<p>  const [buttonText, setbuttonText] = useState(‘Hide Text Component’);</p>
<p>  const Control = () =>{</p>
<p>    if(visible == true)<br />
    {<br />
      setVisible(false);<br />
      setbuttonText(‘Show Text Component’);<br />
    }<br />
    else<br />
    {<br />
      setVisible(true);<br />
      setbuttonText(‘Hide Text Component’);<br />
    }<br />
  }</p>
<p>  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      {<br />
          // Pass View or Component inside the curly bracket.</p>
<p>          visible ? <ViewText /> : null<br />
      }</p>
<p>      <Button title={buttonText} onPress={Control} /></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>});

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

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

import ViewText from ‘./components/viewText’ ;

export default function App() {

const [visible, setVisible] = useState(true);

const [buttonText, setbuttonText] = useState(‘Hide Text Component’);

const Control = () =>{

if(visible == true)

{

setVisible(false);

setbuttonText(‘Show Text Component’);

}

else

{

setVisible(true);

setbuttonText(‘Hide Text Component’);

}

return (

{

// Pass View or Component inside the curly bracket.

visible ? <ViewText /> : null

}

</View>

);

}

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#FAFAFA’,

padding: 10

}

});

Screenshots:

Use useEffect as componentwillunmount in React Native Hooks Example

Contents in this project Use useEffect as componentwillunmount in React Native Hooks Android iOS Example Tutorial:

Also Read :

Recent Posts

Search Here