Fixed 'useRefresh' issue with reparenting

dist/muuri-react.cjs.js

@@ -1,5 +1,5 @@
 /**
-* Muuri-react v3.1.3
+* Muuri-react v3.1.5
 * https://paol-imi.github.io/muuri-react
 * Copyright (c) 2020-present, Paol-imi
 * Released under the MIT license
@@ -1519,12 +1519,14 @@ function ItemComponent(_ref) {
     return {
       eventController: eventController,
       itemRefController: itemRefController,
-      itemRemoveController: itemRemoveController
+      itemRemoveController: itemRemoveController,
+      grid: grid
     };
   }); // Set the props.
 
   store.itemRefController.set('props', child.props);
-  store.itemRemoveController = itemRemoveController; // Set the data.
+  store.itemRemoveController = itemRemoveController;
+  store.grid = grid; // Set the data.
 
   if (propsToData) {
     // Get the data.
@@ -1559,7 +1561,7 @@ function ItemComponent(_ref) {
         element.style.visibility = 'hidden'; // @ts-ignore
 
         if (item._drag) item._drag.destroy();
-        grid.getElement().appendChild(element);
+        store.grid.getElement().appendChild(element);
       } // Remove the item.
 
 
@@ -3016,16 +3018,16 @@ function useRefresh() {
   invariant(itemRefController !== undefined && layoutController !== undefined, 'The useRefresh hook can be used only inside an Item'); // Because of memoization, The identity of the function is guaranteed
   // to be stable so it will be safe to omit it as a dependency.
 
-  var refresh = useFunction(function () {
+  var refresh = React.useCallback(function () {
     if (!itemRefController.hasItem()) return; // Get the item.
 
     var item = itemRefController.getItem(); // If the component is rendering within the MuuriComponent.
 
     layoutController.refreshItem(item);
-  });
+  }, [layoutController, itemRefController]);
   React.useEffect(function () {
     refresh();
-  }, deps); // eslint-disable-line
+  }, deps.concat(refresh)); // eslint-disable-line
 
   return refresh;
 }

dist/muuri-react.esm.js

@@ -1,5 +1,5 @@
 /**
-* Muuri-react v3.1.3
+* Muuri-react v3.1.5
 * https://paol-imi.github.io/muuri-react
 * Copyright (c) 2020-present, Paol-imi
 * Released under the MIT license
@@ -11,7 +11,7 @@ import Muuri from 'muuri';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _typeof from '@babel/runtime/helpers/esm/typeof';
-import React, { createContext, useContext, useEffect, Children, useRef, useState, createRef, forwardRef } from 'react';
+import React, { createContext, useContext, useEffect, Children, useRef, useState, createRef, forwardRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
@@ -1512,12 +1512,14 @@ function ItemComponent(_ref) {
     return {
       eventController: eventController,
       itemRefController: itemRefController,
-      itemRemoveController: itemRemoveController
+      itemRemoveController: itemRemoveController,
+      grid: grid
     };
   }); // Set the props.
 
   store.itemRefController.set('props', child.props);
-  store.itemRemoveController = itemRemoveController; // Set the data.
+  store.itemRemoveController = itemRemoveController;
+  store.grid = grid; // Set the data.
 
   if (propsToData) {
     // Get the data.
@@ -1552,7 +1554,7 @@ function ItemComponent(_ref) {
         element.style.visibility = 'hidden'; // @ts-ignore
 
         if (item._drag) item._drag.destroy();
-        grid.getElement().appendChild(element);
+        store.grid.getElement().appendChild(element);
       } // Remove the item.
 
 
@@ -3009,16 +3011,16 @@ function useRefresh() {
   invariant(itemRefController !== undefined && layoutController !== undefined, 'The useRefresh hook can be used only inside an Item'); // Because of memoization, The identity of the function is guaranteed
   // to be stable so it will be safe to omit it as a dependency.
 
-  var refresh = useFunction(function () {
+  var refresh = useCallback(function () {
     if (!itemRefController.hasItem()) return; // Get the item.
 
     var item = itemRefController.getItem(); // If the component is rendering within the MuuriComponent.
 
     layoutController.refreshItem(item);
-  });
+  }, [layoutController, itemRefController]);
   useEffect(function () {
     refresh();
-  }, deps); // eslint-disable-line
+  }, deps.concat(refresh)); // eslint-disable-line
 
   return refresh;
 }

dist/muuri-react.js

@@ -1,5 +1,5 @@
 /**
-* Muuri-react v3.1.3
+* Muuri-react v3.1.5
 * https://paol-imi.github.io/muuri-react
 * Copyright (c) 2020-present, Paol-imi
 * Released under the MIT license
@@ -2687,12 +2687,14 @@
       return {
         eventController: eventController,
         itemRefController: itemRefController,
-        itemRemoveController: itemRemoveController
+        itemRemoveController: itemRemoveController,
+        grid: grid
       };
     }); // Set the props.
 
     store.itemRefController.set('props', child.props);
-    store.itemRemoveController = itemRemoveController; // Set the data.
+    store.itemRemoveController = itemRemoveController;
+    store.grid = grid; // Set the data.
 
     if (propsToData) {
       // Get the data.
@@ -2727,7 +2729,7 @@
           element.style.visibility = 'hidden'; // @ts-ignore
 
           if (item._drag) item._drag.destroy();
-          grid.getElement().appendChild(element);
+          store.grid.getElement().appendChild(element);
         } // Remove the item.
 
 
@@ -4218,16 +4220,16 @@
     invariant(itemRefController !== undefined && layoutController !== undefined, 'The useRefresh hook can be used only inside an Item'); // Because of memoization, The identity of the function is guaranteed
     // to be stable so it will be safe to omit it as a dependency.
 
-    var refresh = useFunction(function () {
+    var refresh = React.useCallback(function () {
       if (!itemRefController.hasItem()) return; // Get the item.
 
       var item = itemRefController.getItem(); // If the component is rendering within the MuuriComponent.
 
       layoutController.refreshItem(item);
-    });
+    }, [layoutController, itemRefController]);
     React.useEffect(function () {
       refresh();
-    }, deps); // eslint-disable-line
+    }, deps.concat(refresh)); // eslint-disable-line
 
     return refresh;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "muuri-react",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "The layout engine for React.",
   "main": "dist/muuri-react.cjs.js",
   "module": "dist/muuri-react.esm.js",

src/components/itemComponent.tsx

@@ -33,12 +33,13 @@ export function ItemComponent({
     itemRefController.set('key', itemKey);
     itemRefController.set('eventController', eventController);
     // Return the controllers.
-    return {eventController, itemRefController, itemRemoveController};
+    return {eventController, itemRefController, itemRemoveController, grid};
   });
 
   // Set the props.
   store.itemRefController.set('props', child.props);
   store.itemRemoveController = itemRemoveController;
+  store.grid = grid;
 
   // Set the data.
   if (propsToData) {
@@ -83,7 +84,7 @@ export function ItemComponent({
 
         // @ts-ignore
         if (item._drag) item._drag.destroy();
-        grid.getElement().appendChild(element);
+        store.grid.getElement().appendChild(element);
       }
 
       // Remove the item.

src/hooks/useRefresh.ts

@@ -1,7 +1,6 @@
-import {useEffect} from 'react';
+import {useEffect, useCallback} from 'react';
 import {useGridContext, useItemContext} from '../contexts';
 import {invariant} from '../invariant';
-import {useFunction} from '../utils/hooks';
 
 // The method returned by the hook.
 export type RefreshMethod = () => void;
@@ -25,17 +24,17 @@ export function useRefresh(deps: any[] = []): RefreshMethod {
 
   // Because of memoization, The identity of the function is guaranteed
   // to be stable so it will be safe to omit it as a dependency.
-  const refresh = useFunction<RefreshMethod>(() => {
+  const refresh = useCallback(() => {
     if (!itemRefController.hasItem()) return;
     // Get the item.
     const item = itemRefController.getItem();
     // If the component is rendering within the MuuriComponent.
     layoutController.refreshItem(item);
-  });
+  }, [layoutController, itemRefController]);
 
   useEffect(() => {
     refresh();
-  }, deps); // eslint-disable-line
+  }, deps.concat(refresh)); // eslint-disable-line
 
   return refresh;
 }