Explain what is React.FC <interfaceProps>

[utkarsh-1602]

This is my alert-modal.tsx

"use client"

import { useEffect, useState } from "react";

interface AlertModalProps {
    isOpen: boolean;
    onClose: () => void;
    onConfirm: () => void;
    loading: boolean;
}

const AlertModal: React.FC<AlertModalProps> = ({
    isOpen,
    onClose,
    onConfirm,
    loading
}) => {

    const [isMounted, setIsMounted] = useState(false)

    useEffect(() => {
        setIsMounted(true)
    }, [])

    if (!isMounted) {
        return null
    }

    return (

    )

}

export default AlertModal;

[utkarsh-1602]

What is isMounted ?

isMounted here is a simple state hook, that's by default false.

When useEffect is used with an empty dependency array ([]), it means that the code inside the useEffect will only run once: when the component mounts. The empty dependency array signifies that the useEffect should not be re-run for any changes in props or state.

Inside the useEffect, the state updater function setIsMounted is called to set the isMounted state to true. This happens only when the component is mounted.

Putting it all together, this useEffect is utilized to perform an action (setting isMounted to true) specifically when the component is first mounted. The empty dependency array ensures that the effect runs only once during the mounting phase, preventing it from running again for subsequent renders or updates.

This pattern is commonly used to execute code that should run only once when the component mounts, similar to how the componentDidMount lifecycle method worked in class components.

[utkarsh-1602]

What is React.FC ?

• alertModalProps is an interface
• React.FC is a TypeScript generic type that stands for "Functional Component." It's a type alias provided by TypeScript for defining the shape of a functional component's props. The FC type takes a generic parameter that represents the props object.