Best approach for filter data, fetch again, array.filter?

Hi everyone, I'm thinking about it.

We have a API like https://rickandmortyapi.com/ that return a array's character like

{
  "info": {
    "count": 394,
    "pages": 20,
    "next": "https://rickandmortyapi.com/api/character/?page=20",
    "prev": "https://rickandmortyapi.com/api/character/?page=18"
  },
  "results": [
    {
      "id": 361,
      "name": "Toxic Rick",
      "status": "Dead",
      "species": "Humanoid",
      "type": "Rick's Toxic Side",
      "gender": "Male",
      "origin": {
        "name": "Alien Spa",
        "url": "https://rickandmortyapi.com/api/location/64"
      },
      "location": {
        "name": "Earth",
        "url": "https://rickandmortyapi.com/api/location/20"
      },
      "image": "https://rickandmortyapi.com/api/character/avatar/361.jpeg",
      "episode": [
        "https://rickandmortyapi.com/api/episode/27"
      ],
      "url": "https://rickandmortyapi.com/api/character/361",
      "created": "2018-01-10T18:20:41.703Z"
    },
    // ...
  ]
}

We have a input to filter by name and a select to filter by status.
We want add to our project pagination and use the info.next and info.prev, we are using React what is your best aproach to do it?

• Call to the API each time that the input name change? We have the endpoint https://rickandmortyapi.com/api/character/?name=rick
• Filter our array of characters with array.filter?

characters.filter(({name}) => name.includes(filterInputValue))

• Have a state for allData and another one for filterData?

Right now, I call each time to the API but I think this is many calls...

I'm a junior web developer and I want learn about good practise to improve my code, help me!

P.D: Excuse me for my English I improve it soon, Be free to correct me!😅😅

Comments

[Harrison Reid]

Personally I'd say that what you're doing right now is the best approach to take - keeping the filter logic on the server/API side as much as possible will vastly simplify your client side code. However there are a few techniques you could use to minimise the number of requests you're making to the API...

The simplest would be to add an "Apply Filters" button, so you only update the filters and request new data when the user explicitly requests it (rather than on every change to the input/select fields).

If you're not a fan of that user experience then you could look into using throttle/debounce techniques, which allow you to control the rate at which a function is invoked. For instance, you could throttle the function that makes the API requests so it will only be invoked every 5 seconds, which could prevent multiple requests going out to the API while a user types into the name input.

[José Luis Recio]

That was a perfect response! I haven't heard about throttle and debounce but after reading the article it makes perfect sense on my mind. Thank you Harrison!

[Harrison Reid]

You're welcome! 😊

[Dan Spratling]

I would call the API every time the name value changes (only on user request, ie submit) and then use array.filter to manage and thing with known results (dropdowns, checkboxes, etc).

Some other things to consider.

When you request data you could return only pages around the requested page. This means more calls (and is more work to build), but each result is smaller (50 results instead of 5000). Depends on how much you want to optimise things (this is quite extreme).

You could cache results for popular searches or previous searches both servers ide for quick delivery but also in the users browser if they've already searched for it (so you don't re-fetch results).