@placekit/autocomplete-react - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/placekit-react.cjs.js

@@ -1,2 +0,2 @@
-/*! @placekit/autocomplete-react v1.2.0 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
+/*! @placekit/autocomplete-react v1.2.1 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
 'use strict';
@@ -68,3 +68,3 @@
   const [state, setState] = React.useState({
-    dirty: true,
+    dirty: false,
     empty: true,
@@ -85,3 +85,3 @@ freeForm: true,
       ...opts
-    }).on('open', handlers?.onOpen).on('close', handlers?.onClose).on('results', handlers?.onResults).on('pick', handlers?.onPick).on('error', handlers?.onError).on('state', newState => {
+    }).on('open', handlers?.onOpen).on('close', handlers?.onClose).on('results', handlers?.onResults).on('pick', handlers?.onPick).on('error', handlers?.onError).on('dirty', handlers?.onDirty).on('empty', handlers?.onEmpty).on('freeForm', handlers?.freeForm).on('state', newState => {
       setState(prev => ({
@@ -101,2 +101,8 @@ ...prev,
     setClient(pka);
+
+    // init state
+    setState({
+      ...pka.state,
+      hasGeolocation: pka.hasGeolocation
+    });
     return () => {
@@ -120,3 +126,3 @@ pka.destroy();
 
-const PlaceKit = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
+const PlaceKit = /*#__PURE__*/React.forwardRef(({
   apiKey,
@@ -182,3 +188,3 @@ className,
     title: "Clear value",
-    "aria-hidden": state.isEmpty,
+    "aria-hidden": state.empty,
     onClick: client?.clear,
@@ -192,3 +198,3 @@ disabled: inputProps.disabled
   })));
-}));
+});
 PlaceKit.defaultProps = {
@@ -195,0 +201,0 @@ useGeolocation: true,

dist/placekit-react.d.ts

@@ -1,2 +0,2 @@
-/*! @placekit/autocomplete-react v1.2.0 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
+/*! @placekit/autocomplete-react v1.2.1 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
 import type { PKAClient, PKAHandlers, PKAOptions, PKAState } from '@placekit/autocomplete-js';
@@ -3,0 +3,0 @@

package.json

 {
   "name": "@placekit/autocomplete-react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "author": "PlaceKit <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "PlaceKit Autocomplete React library",

README.md

@@ -20,2 +20,3 @@ <h1 align="center">
   <a href="#-custom-hook">Custom hook</a> • 
+  <a href="#-avoid-re-renders">Avoid re-renders</a> • 
   <a href="#%EF%B8%8F-license">License</a>
@@ -120,3 +121,3 @@ </p>
 - Handlers are exposed directly as properties for ease of access.
-- ⚠️ Make sure you memoize handler functions with `useCallback`, otherwise the `<PlaceKit>` component will re-render each time the wrapping component re-renders, causing the PlaceKit client to remount, and the suggestions lists to flush.
+- ⚠️ Make sure you memoize handler functions with `useCallback`, see [Avoid re-renders](#-avoid-re-renders).
 - ⚠️ Passing a non-empty value to `defaultValue` will automatically trigger a first search request when the user focuses the input.
@@ -144,6 +145,5 @@
 
-A few additional notes:
+Some additional notes:
 - `target` is a React `ref` object.
 - The handlers can be passed through `options.handlers`, but also be set with `client.on()` (better use a `useState()` in that case).
-- Don't pass a destructured object into `usePlaceKit` second argument (options), this will cause an infinite update loop as a destructured object will constantly be a fresh new value by nature.
 - `state` exposes stateless client properties (`dirty`, `empty`, `freeForm`, `hasGeolocation`) as stateful ones.
@@ -153,4 +153,42 @@
 
+## 🔁 Avoid re-renders
+
+`<PlaceKit>` is mostly just a wrapper around [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js): it uses `useEffect` to mount it and any change made in the options will cause it to reset and flush the suggestions list.
+
+Because of the way React works, object/array/function literals are always considered fresh values and may cause an unwanted reset of autocomplete JS. Since 1.1.5, `options` object can be passed as literal thanks to [useStableValue](./src/useStableValue.js), but functions and event handlers will still cause re-renders if not memoized.
+
+To avoid re-renders, memoize or hoist those literals:
+
+```jsx
+import { PlaceKit } from '@placekit/autocomplete-react';
+import { useCallback } from 'react';
+
+// hoisting option functions (declaring outside of the component)
+const formatValue = (item) => item.name;
+
+const MyComponent = (props) => {
+
+  // memoizing event handlers with useCallback
+  const handlePick = useCallback(
+    (value, item) => {
+      console.log(item);
+    },
+    []
+  );
+
+  return (
+    <PlaceKit
+      apiKey="<your-api-key>"
+      options={{
+        countries: ['fr'],
+        formatValue,
+      }}
+      onPick={handlePick}
+    />
+  );
+};
+```
+
 ## ⚖️ License
 
 PlaceKit Autocomplete React Library is an open-sourced software licensed under the [MIT license](./LICENSE).

No alert changes

Improved metrics

Total package byte prevSize

24121

increased by5.72%

Lines of code

485

increased by2.54%

Number of lines in readme file

191

increased by24.84%

No dependency changes