Failed to load resource: the server responded with a status of 429 (Too Many Requests) React.js API

Question

In my react app I am trying to render data in my sidebar component that is in the home component. the home component displays a list of shoes from the api and the rate limit is 100, but I lowered the rate limit so that when the side navigation, which renders a list of shoe brands that is stored in an array. when I load the page the side navigation shows the list of brands, but the shoe list does not show and the console logs a 429 error. I've tried lowering the rate limit for the shoe list but the error still occurs. Does anyone have any idea on how I can render both peices of data at the same time?

home.js

import React, {useState, useEffect} from "react";
import api from '../api';
import '../stylesheets/shoeList.css';
import placeholder from '../images/cooming.jpeg'
// import Navbar from '../components/Navbar';
// import SearchBar from '../components/SearchBar';
import SingleSneaker from './SingleSneaker';
import SideBarNav from './SideBarNav'

const Home = () => {
// const [data, SetData] = useState([]);
  const [sneakers, setSneakerData] = useState([]);

  const [filtered, setFiltered] = useState([]);
  const [result, setResult] = useState("");

  useEffect(() => {
    const fetchData = () => {
      api.getData().then((response) => {
        setSneakerData(response.data.results);
        setFiltered(response.data.results);
        console.log(response.data.results);
        
      });
    };

    fetchData();
  }, []);

  useEffect(() => {
      const results = filtered.filter(sneaker=> sneaker.shoe.toLowerCase().includes(result));
      setSneakerData(results);
      
    
  },[result]);

  const onChange =(e)=> {
    setResult(e.target.value);
}

  return (
    <div className="sneakerList-container">
        <SideBarNav />
          <div className="searchBar__container">
            <div className="searchBar_field">
                <div className="searchText_phrase">
                <h3>Search shoes <span className="color">below</span></h3>
                </div>
                <div className="search_input">
                    <input type="text" placeholder="Search..." value={result} onChange={onChange}/>
                </div>
            </div>
            
        </div>
      
      {sneakers && (
        <div className="sneakerlist">
          {sneakers.map((sneaker) => {
            return (
                <SingleSneaker key={sneaker.id} id={sneaker.id} name={sneaker.name} shoe={sneaker.shoe} img={sneaker.media.imageUrl}/>
          
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Home;

sideNav.js

import React, { useState, useEffect}from 'react';
import '../stylesheets/SideNav.css';
import api from '../api';
import {Link } from 'react-router-dom';

 const SideBarNav = () => {
    const [brands, setBrands]= useState([]);
   
    useEffect(() => {
        const fetchData = () => {
            api.getBrand().then((response)=>{
                setBrands(response.data.results);
                console.log(response.data.results);
            });
        };

        fetchData();
    }, [])
   


   
    return (
        <div style={sideNavStyle}>
           { brands && (
               <div className="brand-bocx">
                   {brands.map((brand)=>{
                       return (
                           <div style={color}>
                               <h3>{brand}</h3>
                           </div>
                       )
                   })}
               </div>
           )}
        </div>
    )
}

const sideNavStyle = {
    height: "100vh",
    width: "250px",
    background: "#fff",
    top: "60vh",
    position: "absolute",
    borderRight: " 1px solid #eee",
    left: 0,
    textAlign: "left",
    zIndex: 1
};

const color = {
    color: "#111",
    fontSize: "32px",
    fontFamily: "Source Sans Pro"
}

export default SideBarNav;

API.js

import axios from "axios";

const API_KEY = process.env.RAPID_API_KEY
export default {

getData: () =>
axios({
  method: 'GET',
  url: 'https://v1-sneakers.p.rapidapi.com/v1/sneakers',
  params: {limit: '20'},
  headers: {
    'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
    'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
  }

}),

getDataId: (id) => 
  axios({
    method: 'GET',
  url: 'https://v1-sneakers.p.rapidapi.com/v1/sneakers/' + id,
  headers: {
    'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
    'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
  }
  }),

  getBrand: () =>
    axios({
      method: 'GET',
      url: 'https://v1-sneakers.p.rapidapi.com/v1/brands',
      headers: {
        'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
        'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
      }
    })
  


}

// f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a'

Answer 1

I checked this API on RapidAPI Hub, and it allows you to make 200 API calls per day.

The params: {limit: '20'}, limits the number of sneakers to return by the server, not the API calls.

I think you have already made 200 calls — that why it's showing you 429 Too many requests.

You can check how many calls you made using the RapidAPI developer dashboard.