Angular Lifecycle Hooks

• constructor: This method is executed once during the component's lifecycle.
• ngOnChanges: Triggered when Angular sets or resets data-bound input properties; it runs before ngOnInit if there are bound inputs and when input changes occur.
• ngOnInit: This method runs only once after ngOnChanges has been executed.
• ngDoCheck: Invoked immediately after ngOnChanges or whenever there are changes in the template (in default change detection mode) or when changeDetectionRef.markForCheck is called (in onPush mode).
• ngAfterContentInit: Executed once after the first ngDoCheck.
• ngAfterContentChecked: First called after ngAfterContentInit and subsequently after every ngDoCheck.
• ngAfterViewInit: Runs once after the first ngAfterContentChecked.
• ngAfterViewChecked: First called after ngAfterViewInit and then after every ngAfterContentChecked.
• ngOnDestroy: Executes once before Angular destroys the component.

Be cautious with these performance-sensitive methods: ngOnChanges (if using @Input), ngDoCheck, ngAfterContentChecked, and ngAfterViewChecked. Keeping your methods concise in these areas will help keep your application responsive.

Class-Based React Lifecycle Methods

1. Initialization Phase:
   • constructor: Called once during component creation.
   • getDerivedStateFromProps: Invoked before the component is rendered in the DOM.
   • render: Responsible for rendering elements in the DOM.
   • componentDidMount: Executed after the component has been rendered in the DOM.
2. Update Phase (when state or props change):
   • getDerivedStateFromProps: Called during updates before the DOM is refreshed.
   • shouldComponentUpdate: Allows you to determine if the DOM should be updated based on certain conditions.
   • render: Used to update elements in the DOM.
   • getSnapshotBeforeUpdate: Provides access to state and props before updates occur, used in conjunction with componentDidUpdate.
   • componentDidUpdate: Called after the component has been updated in the DOM.
3. Unmount Phase:
   • componentWillUnmount: Invoked once before React removes the component from the DOM.

As with Angular, it's vital to keep logic in the update phase methods efficient to avoid performance bottlenecks.

Ionic React Lifecycle Methods and Hooks explained in 5 minutes - This video succinctly covers the lifecycle methods and hooks in Ionic React, providing a quick reference for developers looking to enhance their understanding.

Functional-Based React Hooks

• useState: Comprises two parts; the first element manages initialization, while the second is for updating the state.

• useEffect: Can be defined multiple times within a component and is divided into various parts.

1. Part 1: The implementation with square brackets will run only once upon initialization.

2. Part 2: Without square brackets, this runs on every state or prop change.

3. Part 3: Including a variable in square brackets will trigger the effect only when that variable changes.

4. Part 4: Similar to componentWillUnmount and ngOnDestroy, the return callback function executes cleanup code before the component is removed from the DOM.

When implementing Part 2, avoid including state mutation logic in the useEffect block to prevent infinite loops.

React Lifecycle Methods Using Class & Functional Components (Frontend Interview Experience) EP-01 - This video provides insights into React lifecycle methods through practical examples, perfect for interview preparation.