useEffectsAsync.jsx

import React from 'react';

const Demo = () => {
    const [value, setValue] = React.useState();
    const [data, setData] = React.useState();

    React.useEffect(() => {
        const fetchData = async () => {
            if (value) { // dont call the fetch on initial load when value is empty
                const result = await fetch('https://.....');
                setData(result);
            }
        };
        fetchData();
    }, [value]); // React.useEffect is listening for changes in [] bracket, so when the value in here change, that async function is called

    return (
        <div>
            <input defaultValue={value} onChange={(event) => setValue(event.target.value)} />
        </div>
    );
};

export default Demo;