Amending props comparison. Fixes #545

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-keyboard",
-  "version": "2.2.83",
+  "version": "2.3.0",
   "description": "React.js Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/lib/components/Keyboard.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import Keyboard from "simple-keyboard";
-import { parseProps, propsChanged } from "../services/Utilities";
+import { parseProps, changedProps } from "../services/Utilities";
 import "simple-keyboard/build/css/index.css";
 
 const KeyboardReact = props => {
@@ -20,14 +20,20 @@ const KeyboardReact = props => {
       props.keyboardRef && props.keyboardRef(keyboardRef.current);
     }
 
+    const updatedProps = changedProps(previousProps.current, props);
+
     /**
      * Only trigger render if props changed
      */
-    if (propsChanged(previousProps.current, props)) {
+    if (updatedProps.length) {
       let keyboard = keyboardRef.current;
       previousProps.current = props;
       keyboard.setOptions(parseProps(props));
-      props.debug && console.log("ReactSimpleKeyboard: Rendered");
+      props.debug &&
+        console.log(
+          "ReactSimpleKeyboard - Re-render due to updated props:",
+          updatedProps
+        );
     }
   }, [initRef, cssClass, previousProps, props]);
 

src/lib/services/Utilities.js

@@ -3,12 +3,17 @@ export const parseProps = props => ({
   theme: `simple-keyboard ${props.theme || "hg-theme-default"}`
 });
 
-export const propsChanged = (prevProps, props) => {
-  const cleanProps = sourceObj =>
-    JSON.stringify({
-      ...sourceObj,
-      stateToIgnore: null
-    });
+const cleanProps = sourceObj => ({
+  ...sourceObj,
+  keyboardRef: null,
+  stateToIgnore: null
+});
+
+export const changedProps = (prevProps, props) => {
+  const cleanedProps = cleanProps(props);
+  const cleanedPrevProps = cleanProps(prevProps);
 
-  return cleanProps(props) !== cleanProps(prevProps);
+  return Object.keys(cleanedProps).filter(
+    propName => cleanedProps[propName] !== cleanedPrevProps[propName]
+  );
 };