Zustand erzeugt unerwünschtes Rerendering

[quargh]

Hallo,

in meinem Maps Project habe ich eine Zustand Variable userGPS in useGPSStore. Diese wird im einem Interval von 10 Sekunden durch getLocation() in GridLayout aktualisiert. In Maps.jsx wird der Wert importiert, um einen Marker der eigenen GPS-Position auf der Map zu aktualisieren. Wenn man man die Map bewegt (Drag) und währenddessen userGPS einen neuen Wert erhält, wird die Map neu gerendert und einem die Karte quasi aus der Hand gerissen (sie steht plötzlich während man sie gerade schwenkt.
Ein Branch mit dem Problem liegt hier: https://github.com/quargh/capstone-project/tree/Geolocation
Die Fehler ist leicht zu reproduzieren, indem man die Map hin und her schwenkt, nach spätestens 10 sek friert die Bewegung ein. Wie würde man sowas am besten lösen?

Danke und viele Grüße!

[alexclaes]

Hallo Stefan,

du hattest vorhin auch eine Frage rund um die Anmerkung vom Linter angesprochen. Dieses Thema solltest du vorranging angehen und danach den kleinen Drag-Bug lösen.

Du solltest du nächst ein useCallback für die Funktionen success und error nutzen. Damit werden die Funktionen an die darin genutzten State-Variablen gebunden und nicht mit jedem Rendering neu erzeugt. Außerdem sollten die Funktionen sprechender benannt werden.

Etwa so:

// GridLayout.js

const handleGeoLocationSuccess = useCallback(
  position => {
   // [...] logic from function "success"
  },
  [centerGPS, setIsGPSCentered, setPermission, setTargetGPS, setUserGPS]
);

const handleGeoLocationError = useCallback(
  error => {
    // [...] logic from function "error"
  },
  [setPermission]
);

Außerdem sollte die Funktion getLocation mit in den Effekt geschrieben werden. Die beiden obigen Funktion sind Abhängigkeiten von dem Effekt

// GridLayout.js

useEffect(() => {

  function getLocation() {
    // [...] logic to request geo location
  }

  // [...] interval logic
}, [handleGeoLocationSuccess, handleGeoLocationError]);

Wenn du useCallback versehen willst, ist hier ein sehr guter ausführlicher Artikel:
https://www.joshwcomeau.com/react/usememo-and-usecallback/

Nun zu kleinen Bug beim Drag.

Du solltest während des Dragging nicht die GeoLocation ermitteln. Dazu musst du dir zunächst merken, ob der User momentan dragged.

Im store speichern:

// useGPSStore.js

// [...]
	isDragging: false,
	setIsDragging: bool => set({isDragging: bool}),
// [...]	

Auf Nutzerainteraktion setzen:

// Map.jsx

function onStartDrag() {
    setIsDragging(true);
    // [...]
}

function onStartEnd {
    setIsDragging(false);
    // [...]
}

Der Trick ist, den Effekt mit dem Interval von isDragging abhängig zu machen.

• Sobald der User mit dem Dragging beginnt, wird der Effekt abgeräumt und das Interval gecleared.
• Sobald der User das Dragging beendet, wird der Effekt wieder ausgeführt, die GeoLocation aktualisiert und das Interval neu gestartet.

// GridLayout.js

useEffect(() => {
  if (!isDragging) {
    // [...] all logic here
  }
}, [handleGeoLocationSuccess, handleGeoLocationError, isDragging]);