Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance of rendering over 10k items using React

Performance of rendering over 10k items using React

Masayuki Izumi

May 10, 2017
Tweet

More Decks by Masayuki Izumi

Other Decks in Programming

Transcript

  1. ### 技術stack ‑ React + ReduxのSPA ‑ generatorとasync/await使い放題 ‑ ドメインロジックはredux‑sagaからservice呼ぶ

    ‑ Flow + ESLint ‑ テストはドメインロジックがほとんど・E2Eはなし ‑ css‑module, PostCSS
  2. ### dependencies ‑ `immutable` 3.8.1 ‑ `react` 15.5.3 ‑ `react-router`

    4.0.0 ‑ `redux` 13.6.0 ‑ `redux-saga` 0.14.3 ‑ `reselect` 2.5.4
  3. #### 参考: redux‑sagaによるdebounceの実装 ``` function* handleInput({ input }) { yield

    call(delay, 500) // debounce by 500ms // ... } function* watchInput() { yield takeLatest('INPUT_CHANGED', handleInput); } ``` https://redux‑saga.js.org/docs/recipes/
  4. ### `immutable` ‑ `immutable` なデータ構造を提供 ‑ ↓ こういうのができて便利 ``` Object.assign({},

    post, {title: "Title") {...post, title: 'Title'} post.set('title', 'Title') ``` React使い必見! Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
  5. #### `shouldComponentUpdate` と `immutable` ↓ こんなふうにしてた ``` import { is

    } from 'immutable' shouldComponentUpdate({ user }: Props) { return is(user, this.props.user) } ```
  6. ### `React.PureComponent` ‑ 勝手に `shouldComponentUpdate` 定義してくれる君 ‑ `props` と `state`

    の値をそれぞれ `shallowEqual` ‑ `React.Component` → `React.PureComponent` だけで充分 な場合も多い
  7. ### その他 `immutable` の注意点 ‑ `toJS()` も当然重い(recursiveなので) ‑ `Map#get()` と

    `Map#has()` はO(1)ではない ‑ ↑ `map` や `filter` が普通より重くなりやすい
  8. ### `react-virtualized` ‑ スクロールを監視するのはリストの親のみ ``` <List {...{ width, height, rowCount,

    rowHeight }} rowRenderer={({ key, index: i, style }) => ( <ContactItem {...{ key, style, user: users.get(i) }} /> )} /> ```
  9. ## Conclusion ‑ `shouldComponentUpdate` or `PureComponent` を使う ‑ 量の多いイベントは `debounce`

    や `throttle` を検討 ‑ `immutable` の `is()` や `toJS()` は重い ‑ `immutable` の `get()` は `has()` は `O(1)` ではない ‑ 画面外のComponentは描画しない ‑ 巨大なリストには `react-virtualized` が有効