import './App.css'
: This imports the CSS fileApp.css
to style the components in this file.import axios from "axios";
: Imports Axios library for making HTTP requests.import { useEffect, useState } from "react";
: ImportsuseEffect
anduseState
hooks from the React library.
const BASE_URL = "https://xxxxxxxxxxxxxxx.mockapi.io/v1/todo";
: Defines the base URL for the API endpoint.
App
: This is the functional component namedApp
.
const [data, setData] = useState(null);
: Initializes a state variabledata
using theuseState
hook, which will store the fetched data from the API.
- Utilizes the
useEffect
hook to perform side effects in the component. - Fetches data from the API when the component mounts.
- Uses an empty dependency array (
[]
) to ensure the effect runs only once.
- Defines an asynchronous function
fetchData
to fetch data from the API using Axios. - Sets the fetched data into the
data
state variable.
- Defines a clean-up function inside the
useEffect
hook to cancel any pending Axios requests. - This function is called when the component unmounts or re-renders.
- Helps prevent memory leaks by canceling pending requests before new effects are run.
- Renders JSX elements:
- Heading
My Component to cancel useEffect
. - Unordered list (
<ul>
) with three list items (<li>
), each containing an anchor (<a>
) tag with different links. - Displays the fetched data if available, using
JSON.stringify
.
- Heading
export default App
: Exports theApp
component as the default export from this file.