0

I have an api that fetches names(usernames) based on country somewhere along the lines of.

/names/{countryName}

and the UI has two tabs - being Australia and India. For this I'm using material ui tabs in react.

Once the user clicks India it calls /names/India and fetches a list of names (close to 200). Similarly it goes for Australia.

When the call is made to the backend I'm showing a loader in the frontend. Then I'm storing the result in an object called names in state. names['India'] and names['Australia'] is an array of 200 values each. These names are shown in a table with the names and a random image generated from the names. And this is all working fine.

Problem starts when a user switches back and forth the tabs. Since the data is already there in the state, so no new call is made. But even then the rendering is slow. It remains on the old tab until data in new tab is rendered and only then it switches to the new tab and this is misleading to the end user.

I was thinking of using react-window-infinite-loader but that is more useful when you are fetching data page by page and the api returns you data that way. But right now, the data is anyway there on state. Why is it taking so much time to render it, how can I avoid this?

inquisitive
  • 3,738
  • 6
  • 30
  • 56
  • Are the UI components for India and Australia the same? – Ishan Joshi Oct 15 '19 at 09:11
  • @IshanJoshi yes, the UI components are same. all of them have access to the name of the tab chosen and names array (through the state) so they just do `names['tabChosen']` to pass data as props to the component. – inquisitive Oct 15 '19 at 09:16
  • Maybe having 400 elements in the state is hampering your performance – Ishan Joshi Oct 15 '19 at 09:17
  • 2
    Have you tried paginating the elements – Ishan Joshi Oct 15 '19 at 09:17
  • @IshanJoshi that's why I'm planning to try out infinite scrolling now. But is that (or pagination) the only option? – inquisitive Oct 15 '19 at 09:18
  • Yes. Along with pagination, you should also check out lazy loading – Ishan Joshi Oct 15 '19 at 09:26
  • 1
    You can also try using React.memo or React.useMemo, but it's hard to give any suggestions without seeing some code. These will ensure that react won't have to do expensive rendering calculations if dependencies don't change. My personal preference would be infinite scrolling though. It's always better to initially render 10 items insead of 200. – Andrej Jurkin Oct 15 '19 at 09:26
  • You haven't provided any code so who knows – Dominic Oct 15 '19 at 09:30
  • I thought the situation provided explains the code itself. I will try using the infinite scroll. Thanks all. – inquisitive Oct 15 '19 at 10:52
  • 1
    @IshanJoshi An infinite scroll solved my problem. Thanks. – inquisitive Dec 06 '19 at 12:18

0 Answers0