Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug] Loading libraries is not optimised

Aperta
  • Qualcosa non va?
#544 2 commenti 5 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend, performance

Direzione di ricerca

Inizia riproducendo il problema in un'app React vuota con una mappa di base e un console.log in un child racchiuso da API Provider. Leggi API Provider, API Context, Map component e gli hook che caricano librerie o tengono traccia delle istanze della mappa. Il lavoro è completato quando la mappa iniziale e il caricamento delle librerie non causano più i render ripetuti del child segnalati, anche quando un child richiede un'altra libreria.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement
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

image

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

Lingua principale
TypeScript
Stelle
1.9k
Fork
195
Merge medio
2g 11h
PR unite (30g)
14

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di visgl/react-google-maps

Tutte le issue di visgl/react-google-maps

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.