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!😅😅

Blog

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

José Luis Recio

Join Our Newsletter. No Spam, Only the good stuff.

Related