Lifecycle methods in React Native describe the different phases a component goes through from creation to removal. Understanding these phases helps manage data fetching, subscriptions, UI updates, and cleanup efficiently.
useEffect to handle lifecycle behavior.
// React Native class component lifecycle example
import React from "react";
import { Text, View } from "react-native";
class LifeCycleDemo extends React.Component {
componentDidMount() {
// Runs once after component is mounted
console.log("Component Mounted");
}
componentDidUpdate() {
// Runs after every update
console.log("Component Updated");
}
componentWillUnmount() {
// Cleanup before component is removed
console.log("Component Will Unmount");
}
render() {
// UI rendering logic
return (
Lifecycle Methods
);
}
}
export default LifeCycleDemo;
When the component loads, componentDidMount runs first. On state or prop changes, componentDidUpdate executes. Before removal, componentWillUnmount handles cleanup.
Click the simulator buttons below to see the corresponding phase highlight here.
Simulate a React Native Component lifecycle. Watch the console logs and the diagram above.