[Bug] Loading libraries is not optimised
メンテナーはふだん 6 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 25/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend, performance
調査の方向性
まず、基本的なマップと、API Provider でラップされた child 内の console.log を含む空の React アプリで、問題を再現します。API Provider、API Context、Map component、およびライブラリを読み込んだりマップインスタンスを追跡したりする hooks を読みます。初期マップとライブラリの読み込みによって、報告されている child の繰り返しレンダーが発生しなくなり、child が別のライブラリを要求した場合も同様であれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Description
Libraries are loaded in the API Provider in a for loop and then on resolution of each library set into state. This causes lots of re-renders of all children of the API Provider to be updated several times when the components are first loaded.
The way the map instances are created are also fairly unpereformant, the API Contect tracks map instances in state, and the state is set from inside the Map component as it loads forcing multiple renders for that also every time, and it causes the whole tree to re render.
All of these thing also happen in isolation in different hooks used inside the API Context which means in total there is quite a few renders by the time everything is loaded and things stop getting set into state.
There is also hooks that allow a similar flow to the Map state management which allows you to render a new library in a child of the API context which then sets the new library into state in the ApiProvider also causing multiple re renders on loading of new libraries in children.
Would probably be a good idea to rethink the way the way the API Context provider is structured, possible making use of Promises.all() or simliar methods to wait on mutliple asynchronus requests to complete at the same time, Loading libraries directly at the time of creating the Context or storing them / sharing them in a different way because the performance problems means that you can't really wrap that provider around a full page and make use of multiple libraries under one provider.
Steps to Reproduce
Create a blank react app and add the package.
Create a basic page
Render a basic map
Add a console.log('render') to the blank page in a subcomponent wrapped by the context provided.
See lots of renders.
Environment
- Library version:
- Google maps version: weekly
- Browser and Version:
- OS:
Logs
No response
- 主要言語
- TypeScript
- スター
- 1.9k
- フォーク
- 193
- 平均マージ
- 3日 19時間
- マージ済み PR（30日）
- 18
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
visgl/react-google-maps のほかの issue
-
google maps issue
難易度 3/5 1〜2日 初心者へのやさしさ 74/100
visgl/react-google-maps#1080 · コメント 1 件 ·
メンテナーはふだん 6 日以内に返信
-
bug needs more info
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
visgl/react-google-maps#1039 · コメント 1 件 ·
メンテナーはふだん 6 日以内に返信
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
visgl/react-google-maps#918 · コメント 9 件 ·
メンテナーはふだん 6 日以内に返信
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
visgl/react-google-maps#905 ·
メンテナーはふだん 6 日以内に返信
-
google maps issue
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
visgl/react-google-maps#889 · コメント 1 件 ·
メンテナーはふだん 6 日以内に返信
visgl/react-google-maps の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
MoonshotAI/kimi-code#4398 ·
メンテナーはふだん 1 日以内に返信
-
Xiaomi Mimo语音识别服务异常オープンpending triage
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
メンテナーはふだん 1 日以内に返信
-
package-lock.json : les binaires natifs macOS et Linux de unrs-resolver ont disparu depuis #1823オープンbug dependencies
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
AxaFrance/design-system#2064 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100