How to reduce the number of requests to the service when entering a query string from the keyboard?

Question

A request is sent to the service when entering each character in the search bar, and every time the page is refreshed, I get extra requests. this greatly spoils the optimization. How can I fix this?

api request

const URL = 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address';

export const getUrLOptions = (query, locations, bound) => {
    const url = URL;
    const options = {
        method: 'POST',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
        },
        body: JSON.stringify({
            query: query,
            count: 8,
            locations: [locations],
            from_bound: {"value": bound},
            to_bound: {"value": bound==="city"?"settlement":bound},
        }),
    };
    return {url:url, options:options}
}

my function

import {getUrLOptions} from "../../../api/config";

    const [stateRegion, setStateRegion] = useState({
        data: {
            suggestions: []
        },
        query: ' ',
        value: props.data["UF_REGION"+prefix]?props.data["UF_REGION"+prefix]:"",
        valueKLADR:props.data["UF_REGION_KLADR"+prefix]?props.data["UF_REGION_KLADR"+prefix]:""
    });

    const getDataRegion = () => {

        const conf = getUrLOptions(stateRegion.query,{}, "region");

        if (stateRegion.query.length > 0) {
            fetch(conf.url, conf.options)
                .then((response) => response.json())
                .then((result) => {
                    setStateRegion((prevState) => {
                        return {
                            ...prevState,
                            data: result,
                        };
                    });
                })
                .catch((error) => console.log('error', error));
        }
    };

    useEffect(() => {
        getDataRegion();
    }, [stateRegion.query]);

score 0 · Answer 1 · answered Feb 22 '23 at 11:29

return(

<Autocomplete
    id="UF_REGION_R"
    freeSolo
    value={stateRegion.value}
    onChange={(e,value) => {
        if (value===null) {
            setStateRegion({...stateRegion, value:"", valueKLADR:""})
        }
        const arrReg = stateRegion.data.suggestions.filter(el=>el.data.region===value)
        if (arrReg.length) {
            setRegAdr(false)
            setStateRegion({...stateRegion, value:arrReg[0].data.region, valueKLADR:arrReg[0].data.region_kladr_id})
            ref_region.current.querySelector("input").setAttribute("data-kladr-id", arrReg[0].data.region_kladr_id);
        } else {
            ref_region.current.querySelector("input").setAttribute("data-kladr-id", "");
        }
    }}
    options={stateRegion.data.suggestions ? stateRegion.data.suggestions.map((option) => option.data.region) : ""}
    renderInput={(params) => <TextField {...params} ref={ref_region} className="input kladr-region" name="UF_REGION" label="region" variant="outlined" autoComplete="off" error={arError} onChange={(e) => {
        setStateRegion((prevState) => {
            return {
                ...prevState,
                query: e.target.value,
            };
        });
    }}/>}
/>
)

How to reduce the number of requests to the service when entering a query string from the keyboard?

1 Answers1