Photo by on Sanjeevan SatheesKumar Unsplash Recently my team have started working on the first big React Native app. Quite soon I had to implement a page with filters list: Problem In the initial version of the page, a single click on checkbox element initiated a noticeable delay. takes most of FlatList[update] 250ms There are 75 elements in the list and only 11 visible at a single moment of time. So I was expecting (which has a virtualization feature out of the box) to rerender only a single changed element (in the worst case — only visible elements). But it . FlatList rerenders all items To show a selectable list of categories I retrieve from redux state and create a new array that contains Category data and flag : Original Approach Categories extendedCategories isShown Solution After the small change, render time went down to 56ms. To , I had to stop mutating data source for FlatList and rerender items ONLY if they have changed. cut down render time 5x times Instead of creating a new data source object after each rerender, I use existing array to map over. And calculate on the level. Now the data source is always the same object and prop will get new value only when checkbox changes it’s value. categories isShown FlatList isShown 2. Use for PureComponent renderItem is similar to . The difference between them is that doesn’t implement , but implements it with a shallow prop and state comparison. ’s only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. PureComponent Component Component shouldComponentUpdate() PureComponent PureComponent shouldComponentUpdate() Redux State — an array of all meta info about categories Categories — an array with only selected categories {id, name} SelectedCategories After clicking on the category, it is added to array, and object is always the same, without mutations. If the user clicks on an already selected category, it is being removed from the array. SelectedCategories Categories SelectedCategories Profiling From my experience, unlike React, extra rerender in React Native affects user experience much worse. The fastest way to find extra renders is old in render function. After you found an issue, use Chrome Profiler tab in developer tools to dig into it. Or (coming in 16.5). console.log new React Profiler Want to play with the code? Check out the GitHub repo! _Contribute to ProductCrafters/rn_perf development by creating an account on GitHub._github.com ProductCrafters/rn_perf P.S. If you enjoyed this article and want more like these, please clap and share with friends that may need it. 🚀 . We help US startup founders to bring their ideas to life. If you need some help, send a message ✉️ My team uses JS and React to build production apps over 3 years oleg@productcrafters.io
