refactor: memoized SVGPieces

package.json

@@ -74,13 +74,14 @@
     "prettier": "^2.0.5",
     "react": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-svg": "^13.4.0",
     "react-native-builder-bob": "^0.20.3",
+    "react-native-svg": "^13.4.0",
     "release-it": "^15.0.0",
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "qrcode": "^1.5.1"
+    "qrcode": "^1.5.1",
+    "react-fast-compare": "^3.2.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"

src/components/SVGPieces.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Path } from 'react-native-svg';
+import isEqual from 'react-fast-compare';
 
 import { INNER_EYE_SIZE_IN_BITS, OUTER_EYE_SIZE_IN_BITS } from '../constants';
 
@@ -39,7 +40,7 @@ interface SVGPiecesProps extends PieceOptions {
   logoArea?: LogoArea;
 }
 
-export default function SVGPieces({
+function SVGPiecesImpl({
   bitMatrix,
   pieceLiquidRadius = 0,
   pieceBorderRadius,
@@ -291,3 +292,5 @@ export default function SVGPieces({
 
   return <>{svgPiecesMatrix}</>;
 }
+
+export default memo(SVGPiecesImpl, isEqual);

yarn.lock

@@ -8014,6 +8014,11 @@ [email protected]:
     shell-quote "^1.6.1"
     ws "^7"
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"