Update some internal logic

Author: PaulLeCam

example/package.json

@@ -14,8 +14,8 @@
   "devDependencies": {
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "typescript": "catalog:",
-    "vite": "^7.1.2"
+    "vite": "^7.3.0"
   }
 }

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.14.0",
+  "packageManager": "pnpm@10.27.0",
   "devEngines": {
     "runtime": {
       "name": "node",
@@ -18,22 +18,22 @@
     "build": "turbo run build:clean && pnpm run -r build:types && turbo run build:js"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.0",
+    "@biomejs/biome": "^2.3.10",
     "@skypack/package-check": "^0.2.2",
-    "@swc/cli": "^0.7.8",
-    "@swc/core": "^1.13.3",
+    "@swc/cli": "^0.7.9",
+    "@swc/core": "^1.15.8",
     "@swc/jest": "^0.2.39",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@types/jest": "^30.0.0",
     "@types/leaflet": "catalog:",
     "@types/warning": "^3.0.3",
-    "del-cli": "^6.0.0",
-    "jest": "^30.0.5",
-    "jest-environment-jsdom": "^30.0.5",
+    "del-cli": "^7.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "leaflet": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "turbo": "^2.5.6",
+    "turbo": "^2.7.2",
     "typescript": "catalog:"
   },
   "jest": {

packages/core/src/attribution.ts

@@ -1,13 +1,13 @@
 import type { Map as LeafletMap } from 'leaflet'
-import { useEffect, useRef } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 
 export function useAttribution(
   map: LeafletMap,
   attribution: string | null | undefined,
 ) {
   const attributionRef = useRef(attribution)
 
-  useEffect(
+  useLayoutEffect(
     function updateAttribution() {
       if (
         attribution !== attributionRef.current &&

packages/core/src/component.tsx

@@ -4,8 +4,8 @@ import {
   type ReactNode,
   type Ref,
   type RefObject,
-  useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useState,
 } from 'react'
 import { createPortal } from 'react-dom'
@@ -46,7 +46,7 @@ export function createDivOverlayComponent<
 
     useImperativeHandle(forwardedRef, () => instance)
     // biome-ignore lint/correctness/useExhaustiveDependencies: update overlay when children change
-    useEffect(
+    useLayoutEffect(
       function updateOverlay() {
         if (isOpen) {
           instance.update()

packages/core/src/control.ts

@@ -1,5 +1,5 @@
 import type { Control, ControlOptions } from 'leaflet'
-import { useEffect, useRef } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 
 import { useLeafletContext } from './context.js'
 import type { ElementHook } from './element.js'
@@ -14,7 +14,7 @@ export function createControlHook<E extends Control, P extends ControlOptions>(
     const positionRef = useRef(props.position)
     const { position } = props
 
-    useEffect(
+    useLayoutEffect(
       function addControl() {
         instance.addTo(context.map)
 
@@ -25,7 +25,7 @@ export function createControlHook<E extends Control, P extends ControlOptions>(
       [context.map, instance],
     )
 
-    useEffect(
+    useLayoutEffect(
       function updateControl() {
         if (position != null && position !== positionRef.current) {
           instance.setPosition(position)

packages/core/src/element.ts

@@ -1,4 +1,4 @@
-import { type RefObject, useEffect, useRef } from 'react'
+import { type RefObject, useLayoutEffect, useRef } from 'react'
 
 import type { LeafletContextInterface } from './context.js'
 
@@ -53,7 +53,7 @@ export function createElementHook<E, P, C = unknown>(
     const propsRef = useRef<P>(props)
     const { instance } = elementRef.current
 
-    useEffect(
+    useLayoutEffect(
       function updateElementProps() {
         if (propsRef.current !== props) {
           updateElement(instance, props, propsRef.current)

packages/core/src/layer.ts

@@ -1,5 +1,5 @@
 import type { InteractiveLayerOptions, Layer, LayerOptions } from 'leaflet'
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 
 import { useAttribution } from './attribution.js'
 import { type LeafletContextInterface, useLeafletContext } from './context.js'
@@ -16,7 +16,7 @@ export function useLayerLifecycle(
   element: LeafletElement<Layer>,
   context: LeafletContextInterface,
 ) {
-  useEffect(
+  useLayoutEffect(
     function addLayer() {
       const container = context.layerContainer ?? context.map
       container.addLayer(element.instance)

packages/react-leaflet/src/MapContainer.tsx

@@ -15,8 +15,8 @@ import {
   type ReactNode,
   type Ref,
   useCallback,
-  useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
@@ -31,7 +31,6 @@ export interface MapContainerProps extends MapOptions {
   id?: string
   placeholder?: ReactNode
   style?: CSSProperties
-  whenReady?: () => void
 }
 
 function MapContainerComponent<
@@ -46,7 +45,6 @@ function MapContainerComponent<
     id,
     placeholder,
     style,
-    whenReady,
     zoom,
     ...options
   }: Props,
@@ -71,16 +69,24 @@ function MapContainerComponent<
       } else if (bounds != null) {
         map.fitBounds(bounds, boundsOptions)
       }
-      if (whenReady != null) {
-        map.whenReady(whenReady)
-      }
       setContext(createLeafletContext(map))
     }
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
-      context?.map.remove()
+      const map = context?.map
+      // @ts-expect-error map internals
+      const containerId = map?._containerId
+      // @ts-expect-error map internals
+      const containerLeafletId = map?._container?._leaflet_id
+      if (
+        map != null &&
+        containerId != null &&
+        containerId === containerLeafletId
+      ) {
+        map.remove()
+      }
     }
   }, [context])
 

packages/react-leaflet/src/Pane.tsx

@@ -9,8 +9,8 @@ import {
   forwardRef,
   type ReactNode,
   type Ref,
-  useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useState,
 } from 'react'
@@ -85,7 +85,7 @@ function PaneComponent(props: PaneProps, forwardedRef: Ref<PaneRef>) {
   const newContext = useMemo(() => ({ ...context, pane: paneName }), [context])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: lifecycle-only effect
-  useEffect(() => {
+  useLayoutEffect(() => {
     setPaneElement(createPane(paneName, props, context))
 
     return function removeCreatedPane() {

packages/react-leaflet/src/Popup.tsx

@@ -12,7 +12,7 @@ import {
   type PopupEvent,
   type PopupOptions,
 } from 'leaflet'
-import { type ReactNode, useEffect } from 'react'
+import { type ReactNode, useLayoutEffect } from 'react'
 
 export interface PopupProps extends PopupOptions, EventedProps {
   children?: ReactNode
@@ -30,7 +30,7 @@ export const Popup = createOverlayComponent<LeafletPopup, PopupProps>(
     { position }: PopupProps,
     setOpen: SetOpenFunc,
   ) {
-    useEffect(
+    useLayoutEffect(
       function addPopup() {
         const { instance } = element