v3.0.5

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v3.0.5 (2020-12-20)
+
+Use `useState` hook rather than `useMemo` to store immutable values in `MapContainer` and `Pane`.
+
 ## v3.0.4 (2020-12-13)
 
 Update README

CONTRIBUTING.md

@@ -18,7 +18,7 @@ However, please **do not** send pull requests to add features that are not suppo
 ## Features requests
 
 This library aims only to support the features provided by Leaflet. If any of these features is not implemented yet, please submit a feature request to add it.\
-If you are looking for implementations of features provided by plugins, they will not be provided by this library, but [can be found on npm](https://www.npmjs.com/search?q=keywords%3Areact-leaflet-v3).\
+If you are looking for implementations of features provided by plugins, they will not be provided by this library, but [can be found on npm](https://www.npmjs.com/search?q=keywords%3Areact-leaflet-v3).
 
 ## Other issues
 

package.json

@@ -25,7 +25,7 @@
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-transform-proto-to-assign": "^7.12.1",
     "@babel/plugin-transform-strict-mode": "^7.12.1",
-    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@testing-library/react": "^11.2.2",
@@ -35,17 +35,17 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.10.0",
+    "@typescript-eslint/parser": "^4.10.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.6.1",
     "cross-env": "^7.0.3",
     "del-cli": "^3.0.1",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "React components for Leaflet maps",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -53,9 +53,9 @@
   "devDependencies": {
     "@rollup/plugin-babel": "^5.2.0",
     "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-replace": "^2.3.4",
-    "rollup": "^2.32.1",
+    "rollup": "^2.35.1",
     "rollup-plugin-terser": "^7.0.0"
   }
 }

packages/react-leaflet/src/MapContainer.tsx

@@ -71,8 +71,7 @@ export function MapContainer({
     }
   }, [map, whenCreated])
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const props = useMemo(() => ({ className, id, style }), [])
+  const [props] = useState({ className, id, style })
   const context = useMemo(
     () => (map ? { __version: CONTEXT_VERSION, map } : null),
     [map],

packages/react-leaflet/src/Pane.tsx

@@ -4,7 +4,7 @@ import {
   addClassName,
   useLeafletContext,
 } from '@react-leaflet/core'
-import React, { CSSProperties, ReactNode, useEffect, useMemo } from 'react'
+import React, { CSSProperties, ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 
 const DEFAULT_PANES = [
@@ -66,10 +66,8 @@ function createPane(
 
 export function Pane(props: PaneProps) {
   const context = useLeafletContext()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const paneElement = useMemo(() => createPane(props, context), [])
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const newContext = useMemo(() => ({ ...context, pane: props.name }), [])
+  const [paneElement] = useState(() => createPane(props, context))
+  const [newContext] = useState(() => ({ ...context, pane: props.name }))
 
   useEffect(() => {
     return function removeCreatedPane() {

packages/website/docs/start-installation.mdx

@@ -74,7 +74,7 @@ yarn add react-leaflet
 Finally, you import the necessary components, for example:
 
 ```js
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leafet'
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 ```
 
 ## Using TypeScript

packages/website/package.json

@@ -9,9 +9,9 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.69",
-    "@docusaurus/preset-classic": "2.0.0-alpha.69",
-    "@docusaurus/theme-live-codeblock": "2.0.0-alpha.69",
+    "@docusaurus/core": "^2.0.0-alpha.70",
+    "@docusaurus/preset-classic": "2.0.0-alpha.70",
+    "@docusaurus/theme-live-codeblock": "2.0.0-alpha.70",
     "@react-leaflet/docusaurus-plugin": "^1.0.1",
     "classnames": "^2.2.6",
     "leaflet": "^1.7.1",