React useEffectの使い方②

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
	const [items, setItem] = useState([]);
	const [inputValue, setInputValue] = useState("react");
	const [isLoading, setIsLoading] = useState(false);
	const [query, setQuery] = useState(inputValue);

	useEffect(() => {
		const fetchData = async () => {
			setIsLoading(true);
			const result = await axios(
				`https://hn.algolia.com/api/v1/search?query=${query}`
			);
			setItem(result.data.hits);
			setIsLoading(false);
		};
		fetchData();
	}, [query]);

	return (
		<>
			<form
				onSubmit={(e) => {
					e.preventDefault();
					setQuery(inputValue);
				}}
			>
				<input
					type="text"
					value={inputValue}
					onChange={(e) => {
						setInputValue(e.target.value);
					}}
				/>
				<input type="submit" value="サブミット" />
			</form>

			{isLoading ? (
				<p>Loading</p>
			) : (
				<ul>
					{items.map((item) => (
						<li key={item.objectID}>
							<a href={item.url}>{item.title}</a>
						</li>
					))}
				</ul>
			)}
		</>
	);
}

export default App;