I’m working on a React app where I fetch flight offers using the Amadeus API. My form allows users to input flight details (from, to, departure date, return date), and upon submission, I fetch the flight offers and display them.

The problem is that after fetching the API data, which returns a large response, my app becomes sluggish. Form inputs, buttons, and onChange handlers experience noticeable delays when interacting with the UI.

Here is a simplified version of my code:

I fetch data successfully, but the large amount of data makes the rest of the app (including form handling) slow and unresponsive.

const [formData1, setFormData1] = useState({
    from_inp: '',
    to_inp: '',
    depart_inp: '',
    return_inp: '',
});

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const fromIATA = formData1.from_inp.split('(')[1].replace(')', '');
    const toIATA = formData1.to_inp.split('(')[1].replace(')', '');

    const params = {
      originLocationCode: fromIATA,
      destinationLocationCode: toIATA,
      departureDate: formData1.depart_inp,
      adults: 1,
      children: 1,
    };

    if (formData1.return_inp) {
      params.returnDate = formData1.return_inp;
    }

    // Fetch access token
    const tokenResponse = await axios.post('https://test.api.amadeus.com/v1/security/oauth2/token', {
      grant_type: 'client_credentials',
      client_id: 'YOUR_CLIENT_ID',
      client_secret: 'YOUR_CLIENT_SECRET',
    });

    const accessToken = tokenResponse.data.access_token;

    // Fetch flight offers
    const response = await axios.get('https://test.api.amadeus.com/v2/shopping/flight-offers', {
      params: params,
      headers: {
        'Authorization': `Bearer ${accessToken}`,
      },
    });

    const apiResponse = response.data;
    console.log('API Response:', apiResponse);

    // Handle flight details
    if (Array.isArray(apiResponse.data)) {
      setFlightDetails(apiResponse.data);
    } else {
      setError('No flight details match your search.');
      setFlightDetails([]);
    }

  } catch (error) {
    console.error('Error fetching flight offers:', error);
    setError(`Error fetching flight details: ${error.message}`);
    setFlightDetails([]);
  }
};

What I’ve Tried:

I use useState to handle form inputs.

I considered debouncing onChange handlers but it hasn’t fully resolved the issue.

I’m considering limiting API results, but I want the app to remain responsive even when large amounts of data are fetched.

My Questions:

How can I optimize my app so that form submissions and button clicks don’t lag when handling large API responses?

Should I paginate the API data, or is there a more effective way to handle large responses?

Are there any React-specific techniques I can apply to improve UI performance?

Any advice on how to resolve the performance issues would be greatly appreciated!