diff --git a/package-lock.json b/package-lock.json index d3ff918c..624ef8f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "dayjs": "~1.11.10", "dayjs-twitter": "~0.5.0", "fast-blurhash": "~1.1.2", - "fast-deep-equal": "~3.1.3", + "fast-equals": "~5.0.1", "idb-keyval": "~6.2.1", "just-debounce-it": "~3.2.0", "lz-string": "~1.5.0", @@ -4405,13 +4405,16 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true, "license": "MIT" }, "node_modules/fast-equals": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-3.0.3.tgz", - "integrity": "sha512-NCe8qxnZFARSHGztGMZOO/PC1qa5MIFB5Hp66WdzbCRAz8U8US3bx1UTgLS49efBQPcUtO9gf5oVEY8o7y/7Kg==", - "license": "MIT" + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz", + "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==", + "engines": { + "node": ">=6.0.0" + } }, "node_modules/fast-glob": { "version": "3.3.2", @@ -5570,6 +5573,11 @@ "micro-memoize": "^4.1.2" } }, + "node_modules/moize/node_modules/fast-equals": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-3.0.3.tgz", + "integrity": "sha512-NCe8qxnZFARSHGztGMZOO/PC1qa5MIFB5Hp66WdzbCRAz8U8US3bx1UTgLS49efBQPcUtO9gf5oVEY8o7y/7Kg==" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index b4a99541..3d691b5d 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "dayjs": "~1.11.10", "dayjs-twitter": "~0.5.0", "fast-blurhash": "~1.1.2", - "fast-deep-equal": "~3.1.3", + "fast-equals": "~5.0.1", "idb-keyval": "~6.2.1", "just-debounce-it": "~3.2.0", "lz-string": "~1.5.0", diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 2bcfe09e..ba0d6afc 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -2,7 +2,7 @@ import './compose.css'; import '@github/text-expander-element'; import { MenuItem } from '@szhsin/react-menu'; -import equal from 'fast-deep-equal'; +import { deepEqual } from 'fast-equals'; import { forwardRef } from 'preact/compat'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; @@ -502,7 +502,10 @@ function Compose({ mediaAttachments, }, }; - if (!equal(backgroundDraft, prevBackgroundDraft.current) && !canClose()) { + if ( + !deepEqual(backgroundDraft, prevBackgroundDraft.current) && + !canClose() + ) { console.debug('not equal', backgroundDraft, prevBackgroundDraft.current); db.drafts .set(key, { diff --git a/src/components/status.jsx b/src/components/status.jsx index 9954a125..36baccda 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -9,6 +9,7 @@ import { MenuItem, } from '@szhsin/react-menu'; import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash'; +import { shallowEqual } from 'fast-equals'; import { memo } from 'preact/compat'; import { useCallback, @@ -2460,4 +2461,12 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => { }); }); -export default memo(Status); +export default memo(Status, (oldProps, newProps) => { + // Shallow equal all props except 'status' + // This will be pure static until status ID changes + const { status, ...restOldProps } = oldProps; + const { status: newStatus, ...restNewProps } = newProps; + return ( + status?.id === newStatus?.id && shallowEqual(restOldProps, restNewProps) + ); +}); diff --git a/src/utils/states.js b/src/utils/states.js index 9f1d986a..b52db054 100644 --- a/src/utils/states.js +++ b/src/utils/states.js @@ -1,3 +1,4 @@ +import { deepEqual } from 'fast-equals'; import { proxy, subscribe } from 'valtio'; import { subscribeKey } from 'valtio/utils'; @@ -178,6 +179,7 @@ export function saveStatus(status, instance, opts) { if (!status) return; const oldStatus = getStatus(status.id, instance); if (!override && oldStatus) return; + if (deepEqual(status, oldStatus)) return; queueMicrotask(() => { const key = statusKey(status.id, instance); if (oldStatus?._pinned) status._pinned = oldStatus._pinned;