fix(PropertiesPanel): only call callbacks once on first render

src/PropertiesPanel.js

@@ -1,6 +1,8 @@
 import {
   useState,
-  useEffect
+  useEffect,
+  useMemo,
+  useRef
 } from 'preact/hooks';
 
 import {
@@ -120,7 +122,7 @@ export default function PropertiesPanel(props) {
   const [ layout, setLayout ] = useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
-  useEffect(() => {
+  useUpdateEffect(() => {
     const newLayout = createLayout(layoutConfig);
 
     setLayout(newLayout);
@@ -150,11 +152,14 @@ export default function PropertiesPanel(props) {
   };
 
   // set-up description context
-  const description = createDescriptionContext(descriptionConfig);
+  const description = useMemo(() => createDescriptionContext(descriptionConfig), [ descriptionConfig ]);
+
+  useEffect(() => {
+    if (typeof descriptionLoaded === 'function') {
+      descriptionLoaded(description);
+    }
+  }, [ description, descriptionLoaded ]);
 
-  if (typeof descriptionLoaded === 'function') {
-    descriptionLoaded(description);
-  }
 
   const getDescriptionForId = (id, element) => {
     return description[id] && description[id](element);
@@ -248,4 +253,24 @@ function createDescriptionContext(overrides) {
     ...DEFAULT_DESCRIPTION,
     ...overrides
   };
+}
+
+// hooks //////////////////
+
+/**
+ * This hook behaves like useEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
+ */
+function useUpdateEffect(effect, deps) {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
 }

test/spec/PropertiesPanel.spec.js

@@ -276,6 +276,7 @@ describe('<PropertiesPanel>', function() {
       });
 
       // then
+      expect(layoutChangedSpy).to.have.been.calledOnce;
       expect(layoutChangedSpy).to.have.been.calledWith(layoutConfig);
     });
 
@@ -375,6 +376,7 @@ describe('<PropertiesPanel>', function() {
       });
 
       // then
+      expect(descriptionLoadedSpy).to.have.been.calledOnce;
       expect(descriptionLoadedSpy).to.have.been.calledWith(descriptionConfig);
     });
 
@@ -392,6 +394,7 @@ describe('<PropertiesPanel>', function() {
       });
 
       // then
+      expect(descriptionLoadedSpy).to.have.been.calledOnce;
       expect(descriptionLoadedSpy).to.have.been.calledWith({});
     });