[utility] add R2.useTraceUpdate and T2.unequalWithLog to make debugging easier

src/Gargantext/Utils/Reactix.js

@@ -71,3 +71,26 @@ export const startTransitionImpl = (t) => (f) => () => {
   console.log('starting transition', t, f);
   return t[1](() => { f()() });
 }
+
+function stringify(o) {
+	if(typeof(o) == 'function') {
+		return String(o);
+	}
+	return JSON.stringify(o);
+}
+
+export const _useTraceUpdate = (react) => (props) => () => {
+  const prev = react.useRef(props);
+  react.useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+      if (prev.current[k] !== v) {
+          ps[k] = [stringify(prev.current[k]), stringify(v)];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log('Changed props:', changedProps);
+    }
+    prev.current = props;
+  });
+}

src/Gargantext/Utils/Reactix.purs

@@ -31,7 +31,7 @@ import React.SyntheticEvent as SE
 import Reactix as R
 import Reactix.DOM.HTML (ElemFactory, createDOM, text)
 import Reactix.DOM.HTML as H
-import Reactix.React (react)
+import Reactix.React (react, React)
 import Reactix.SyntheticEvent as RE
 import Reactix.Utils (currySecond, hook, tuple)
 import Simple.JSON as JSON
@@ -726,3 +726,10 @@ foreign import startTransitionImpl :: Transition -> (Unit -> Effect Unit) -> Eff
 
 startTransition :: Transition -> (Unit -> Effect Unit) -> Effect Unit
 startTransition = startTransitionImpl
+
+-- | For debugging why your component rerenders
+-- https://stackoverflow.com/questions/41004631/trace-why-a-react-component-is-re-rendering
+foreign import _useTraceUpdate :: forall a. React -> a -> R.Hooks Unit
+
+useTraceUpdate :: forall a. a -> R.Hooks Unit
+useTraceUpdate = _useTraceUpdate react

src/Gargantext/Utils/Toestand.purs

@@ -7,13 +7,17 @@ module Gargantext.Utils.Toestand
   , InitReload(..)
   , ready
   , useMemberBox
+  , unequalWithLog
   ) where
 
-import Prelude (class Ord, Unit, bind, pure, unit, (+))
-import Data.Set as Set
+import Prelude
+
+import DOM.Simple.Console (log2)
 import Data.Set (Set)
+import Data.Set as Set
 import Effect (Effect)
 import Reactix as R
+import Record (equalFields)
 import Toestand as T
 
 -- | Reload is a simple counter that can be used to force an update.
@@ -71,3 +75,13 @@ useMemberBox val box = T.useFocused (Set.member val) (toggleSet val) box
 toggleSet :: forall s. Ord s => s -> Boolean -> Set s -> Set s
 toggleSet val true set = Set.insert val set
 toggleSet val false set = Set.delete val set
+
+-- | Same as T.unequal but will also log, whenever elements are not equal.
+--   Useful for debugging.
+unequalWithLog :: forall v. Eq v => Show v => String -> T.Change v -> Effect Boolean
+unequalWithLog name { new, old } =
+  if new `notEq` old then do
+    log2 (name <> " change") $ (show new <> " != " <> show old)
+    pure true
+  else
+    pure false