diff --git a/src/tiles.js b/src/tiles.js
index b9928c6..7b283fc 100644
--- a/src/tiles.js
+++ b/src/tiles.js
@@ -120,6 +120,7 @@ export const createTiles = (regl, opts) => {
         }) => {
           if (setMetadata) setMetadata(metadata)
           this.maxZoom = maxZoom
+          this.level = zoomToLevel(this.zoom, maxZoom)
           const position = getPositions(tileSize, mode)
           this.position = regl.buffer(position)
           this.size = tileSize
diff --git a/src/use-controls.js b/src/use-controls.js
index 9f5c391..1d3a465 100644
--- a/src/use-controls.js
+++ b/src/use-controls.js
@@ -3,9 +3,9 @@ import { flushSync } from 'react-dom'
 import { useMapbox } from './mapbox'
 
 export const useControls = () => {
-  const [zoom, setZoom] = useState()
-  const [center, setCenter] = useState()
   const { map } = useMapbox()
+  const [zoom, setZoom] = useState(map.getZoom())
+  const [center, setCenter] = useState(map.getCenter())
 
   const updateControlsSync = useCallback(() => {
     flushSync(() => {
@@ -15,10 +15,10 @@ export const useControls = () => {
   }, [])
 
   useEffect(() => {
-    setZoom(map.getZoom())
-    setCenter(map.getCenter())
-    map.on('load', updateControlsSync)
     map.on('move', updateControlsSync)
+    return () => {
+      map.off('move', updateControlsSync)
+    }
   }, [map])
 
   return { center: center, zoom: zoom }