Hook fixes

package.json

@@ -34,7 +34,7 @@
 		"start": "bunx --bun vite",
 		"build": "vite build",
 		"typecheck": "tsc -p ./tsconfig.json --noEmit",
-		"lint-fix": "biome check . --apply",
+		"lint-fix": "biome check . --write",
 		"check": "biome ci .",
 		"test": "bun test",
 		"css-build": "sass sass/mystyles.scss src/mystyles.css"

src/Main.tsx

@@ -1,5 +1,11 @@
 import { osmAuth } from "osm-auth";
-import React, { Suspense, useEffect, useMemo, useState } from "react";
+import React, {
+	Suspense,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 import { AppContext } from "~/appContext";
 import CustomModal from "~/components/modal";
 import WebGLMissingInfo from "~/components/webGLMissingInfo";
@@ -52,7 +58,7 @@ function Main() {
 	const [osmUsername, setOsmUsername] = useState("");
 	const [openChangesetId, setOpenChangesetId] = useState("");
 
-	const handleLogIn = () => {
+	const handleLogIn = useCallback(() => {
 		auth.authenticate(() => {
 			updateOsmUsernameState(auth, setOsmUsername);
 			if (modalState.type === ModalType.NeedToLogin) {
@@ -66,7 +72,7 @@ function Main() {
 					window.location.hash,
 			);
 		});
-	};
+	}, [auth, modalState.type]);
 
 	useEffect(() => {
 		if (
@@ -79,12 +85,15 @@ function Main() {
 		}
 	}, [handleLogIn]);
 
-	const handleLogOut = () => {
+	const handleLogOut = useCallback(() => {
 		auth.logout();
 		setOsmUsername("");
-	};
+	}, [auth]);
 
-	const authState: AuthState = { auth, osmUsername };
+	const authState: AuthState = useMemo<AuthState>(
+		() => ({ auth, osmUsername }),
+		[osmUsername, auth],
+	);
 
 	const appContext = useMemo(
 		() => ({

src/components/map.tsx

@@ -6,7 +6,13 @@ import maplibregl, {
 	type MapMouseEvent,
 } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
-import React, { type FC, useEffect, useRef, useState } from "react";
+import React, {
+	type FC,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { useAppContext } from "~/appContext";
 import { fetchCountriesData, fetchNodeDataFromBackend } from "~/backend";
@@ -182,18 +188,21 @@ const MapView: FC<MapViewProps> = ({ openChangesetId, setOpenChangesetId }) => {
 		fetchData().catch(console.error);
 	}, [language, setCountriesDataLanguage, setCountriesData]);
 
-	function addMaplibreGeocoder(map: maplibregl.Map) {
-		if (maplibreGeocoderRef.current !== null) {
-			map.removeControl(maplibreGeocoderRef.current);
-		}
-		const newMaplibreGeocoder = new MaplibreGeocoder(nominatimGeocoder, {
-			maplibregl,
-			placeholder: t("sidebar.find_location"),
-		});
-		newMaplibreGeocoder.setLanguage(language);
-		map.addControl(newMaplibreGeocoder);
-		maplibreGeocoderRef.current = newMaplibreGeocoder;
-	}
+	const addMaplibreGeocoder = useCallback(
+		(map: maplibregl.Map) => {
+			if (maplibreGeocoderRef.current !== null) {
+				map.removeControl(maplibreGeocoderRef.current);
+			}
+			const newMaplibreGeocoder = new MaplibreGeocoder(nominatimGeocoder, {
+				maplibregl,
+				placeholder: t("sidebar.find_location"),
+			});
+			newMaplibreGeocoder.setLanguage(language);
+			map.addControl(newMaplibreGeocoder);
+			maplibreGeocoderRef.current = newMaplibreGeocoder;
+		},
+		[t, language],
+	);
 
 	useEffect(() => {
 		if (mapContainer.current === null) return;