React - Mit Seiteffekte umgehen (useEffect)

Seiteffekte sind Aufgaben, welche nicht den render Cycle beeinflussen. Das folgende Beispiel zeigt eine solche Aufgabe:

navigator.geolocation.getCurrentPosition((position) => {
    const sortedPlaces = sortPlacesByDistance(AVAILABLE_PLACES, position.coords.latitude, position.coords.longitude);
  });

• useEffect wird nach dem Laden der Komponente ausgeführt

//App.js
function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const selectedPlace = useRef();
  const [availablePlaces, setAvailablePlaces] = useState([]);
  const [pickedPlaces, setPickedPlaces] = useState(storedPlaces);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      const sortedPlaces = sortPlacesByDistance(AVAILABLE_PLACES, position.coords.latitude, position.coords.longitude);

      setAvailablePlaces(sortedPlaces);
    });
  }, []);
  //restlicher Code
}