Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 4.67 KB

2021-09-11-rn-issues.md

File metadata and controls

79 lines (51 loc) · 4.67 KB
Raw

Introduction

This is actually one of a series posts which mostly focus on several critical issue of "react-like" framework. This post is mostly focus on the Jetpack Compose UI. All the posts are:

I. Re-render issue

One of the biggest performance issue in the React Native is the re-render issue. Let's say we have a parent and child:

function Parent() {
  // it has two props/states: A , B
  return (
    <Text text={A}/>
    <Child prop={B}>
  )
}

Every time the prop A changes, it will refresh the Parent component/View, which means it will generate a new instance of Child and Text.

But it's really unnecessary, as Child only depends on prop B. The parent ask child to re-render based on a irrelevant prop(A), that's kind of awful.

Of course, you can add React.memo() or shouldComponentUpdate() to do a guard code, but it feels so dumb that it relies on the dev to do this. React, as the system, should do a better job in differing, and know what needs to change, and what does not.

P.S. Android's Jetpack Compose can do a better diff algorithnm, so I guess it's not harsh to ask React Native to do so as well.

II. Long list performance

II. Long list performance

2.1 Issues on React Native

React Native's latest view for List is the FlatList. It's powerful as it's easy to use, extend (such as the refresh header, the bottomView, load more pages, ...). However, it has a serious performance blackhole.

1). item layout

To get a better performance, you need to calculate every item's height and offset from the top. I never saw such a case that dev have to calculate the size of ListView item in any platform. Not ListView/RecyclerView, not UITableView, not the ListView in Flutter, ...

I personally think React Native is wasting every dev's time to ask dev to calculate the position for each item.

2). initialNumberToRender

To get a better performance, you can point how many items you want to render when you open the page.

Same comments here, no other platform has asked dev to do so. It's the React Native's responsibility to show just enough items where they are just enough to display in one screen.

3). Long list

React Native is doing terribly in this area. If you have 100 items in the list, RN will load all of them in the memory. I, acutally, has such a memory issue in my company's app. The list we had is using pagination, and the JS render frame rate is just dropping to 0ps, and the memory is just keeping growing when we load more and more pages. It's really a pain for the dev to handle it for you list.

This is the performance of when I open the screen: image

This is what I got when I load several more pages: image

2.2 Is there a solution?

Yeah, lucy for us, there is such a third-party libraryin the the Github. Flipkart/recyclerlistview is just like the RecyclerView in android, and it will reuses views that are no longer visible, instead of createing new objects. So you memory will not explode.

This library has 3.8K, and has been used for several years, and it's updating recently. So it sounds like a stable and reliable library for you to use. However, this is, after all, not a official view, so I don't know if it will keep being stable and reliable.

III. Development Efficience

1). React and React Native is kind of cross-platform. React is for Web, React Native is for mobile development. You have to use a third-party libray to support Windows.

Also, the code is not identical in React and React Native. Take CSS for example, React Native does not have CSS, so React Native has its own style mechanism called StyleSheet.

In other word, you can't have just one code for all platforms. This is a downside comparing to Flutter

2). React and React Native also is not known as a safe/reliable framework. It changes and sometime not backward compatible. Examples are the mix-in, React.createCalss().

3). React and React Native has more than one language to support.

  • For script or configurations of some libraries, you have to use CommonJS.
  • For main source code, you need to use ES6
    • You can have class component
    • But you also need to learn function component and hooks I guess it's just not developer-friendly for us.

4). Watchman makes the preview super easy