Function Comp Lifecycle

This document covers the four phases of the React function component lifecycle—mounting, updating, unmounting, and error handling—explaining how hooks like useState and useEffect enable similar control as class lifecycle methods.

Function Component Lifecycle in React

React function components are the core building blocks for user interfaces. Understanding their lifecycle is essential for managing state, side effects, and cleanup throughout a component’s existence.

Lifecycle Phases Overview

React function components experience four main phases:

• Mounting
• Updating
• Unmounting
• Error Handling

Mounting Phase

During mounting, React initializes the component and prepares it for rendering. Key steps include:

• Initialization: React runs the function body, setting up the initial structure.
• State Initialization: useState is used to declare and initialize state variables.
• Side Effects: useEffect with an empty dependency array runs side effects once after the initial render.

Example: State Initialization

1import React, { useState } from 'react'
2
3function Counter() {
4  const [count, setCount] = useState(0)
5  return <div>Count: {count}</div>
6}

Example: Side Effect on Mount

 1import React, { useState, useEffect } from 'react'
 2
 3function DataFetcher() {
 4  const [data, setData] = useState(null)
 5  useEffect(() => {
 6    fetch('https://api.example.com/data')
 7      .then(res => res.json())
 8      .then(setData)
 9  }, [])
10  return <div>Data: {JSON.stringify(data)}</div>
11}

Updating Phase

In the updating phase, React responds to changes in state or props by re-invoking the function body and re-evaluating the JSX.

Example: Updating State

 1import React, { useState } from 'react'
 2
 3function MyComponent() {
 4  const [count, setCount] = useState(0)
 5  function increment() {
 6    setCount(prev => prev + 1)
 7  }
 8  return (
 9    <div>
10      <p>Count: {count}</p>
11      <button onClick={increment}>Increment</button>
12    </div>
13  )
14}

Unmounting Phase

When a component is removed from the DOM, React performs cleanup operations. This is handled by returning a cleanup function from useEffect.

Example: Cleanup on Unmount

 1import React, { useEffect } from 'react'
 2
 3function Timer() {
 4  useEffect(() => {
 5    const interval = setInterval(() => {
 6      console.log('interval tick')
 7    }, 1000)
 8    return () => clearInterval(interval)
 9  }, [])
10  return <div>Timer running...</div>
11}

Error Handling Phase

If an error occurs during rendering or in a child component, React routes it to the nearest error boundary. Error boundaries are special components that catch errors and display fallback UIs, preventing the entire app from crashing.

Conclusion

React function component lifecycle includes mounting, updating, unmounting, and error handling. Hooks like useState and useEffect provide control over state, side effects, and cleanup, while error boundaries ensure robust error handling.

FAQ