What are the lifecycle methods in a TypeScript React component?

What are the lifecycle methods in a TypeScript React component?

In TypeScript React components, lifecycle methods are hooks that allow you to run code at specific points in a component's life. Common methods include componentDidMount, componentDidUpdate, and componentWillUnmount.

Can you explain what each of these methods does?

Sure! componentDidMount is called after the component is added to the DOM, ideal for fetching data. componentDidUpdate is invoked after updates, useful for responding to prop or state changes. componentWillUnmount is called just before the component is removed, perfect for cleanup tasks.

How do I use these methods in a functional component?

In functional components, you can use the useEffect hook to replicate lifecycle methods. For example, you can pass an empty array to useEffect to mimic componentDidMount, and include dependencies to mimic componentDidUpdate.

Can you provide a code example?

Absolutely! Here's a simple example:

import React, { useEffect } from 'react';

const MyComponent: React.FC = () => {
    useEffect(() => {
        // This mimics componentDidMount
        console.log('Component mounted');

        return () => {
            // This mimics componentWillUnmount
            console.log('Component unmounted');
        };
    }, []);

    return <div>Hello, World!</div>;
};