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.

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.

5. Importing ViewText component from viewText file.

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

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.

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.

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.

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.

11. Creating Style.

12. Complete Source Code for App.js file:

Screenshots:

Use useEffect as componentwillunmount in React Native Hooks Example

Leave a Reply

Your email address will not be published.