diff --git a/src/lib/teact/teact.ts b/src/lib/teact/teact.ts index 2f7bdb42c..8eb31301b 100644 --- a/src/lib/teact/teact.ts +++ b/src/lib/teact/teact.ts @@ -4,7 +4,7 @@ import { requestMeasure, requestMutation } from '../fasterdom/fasterdom'; import { DEBUG, DEBUG_MORE } from '../../config'; import { throttleWith } from '../../util/schedulers'; import { orderBy } from '../../util/iteratees'; -import { getUnequalProps } from '../../util/arePropsShallowEqual'; +import { logUnequalProps } from '../../util/arePropsShallowEqual'; import { incrementOverlayCounter } from '../../util/debugOverlay'; import { isSignal } from '../../util/signals'; import safeExec from '../../util/safeExec'; @@ -807,6 +807,16 @@ export function useMemo( || dependencies.some((dependency, i) => dependency !== byCursor[cursor].dependencies[i]) ) { if (DEBUG) { + if (debugKey) { + const msg = `[Teact.useMemo] ${renderingInstance.name} (${debugKey}): Update is caused by:`; + if (!byCursor[cursor]) { + // eslint-disable-next-line no-console + console.log(`${msg} [first render]`); + } else { + logUnequalProps(byCursor[cursor].dependencies, dependencies, msg, debugKey); + } + } + if (DEBUG_state) { DEBUG_state.misses++; DEBUG_state.hitRate = (DEBUG_state.calls - DEBUG_state.misses) / DEBUG_state.calls; @@ -823,16 +833,6 @@ export function useMemo( ); } } - - if (debugKey) { - // eslint-disable-next-line no-console - console.log( - `[Teact.useMemo] ${renderingInstance.name} (${debugKey}): Update is caused by:`, - byCursor[cursor] - ? getUnequalProps(byCursor[cursor].dependencies, dependencies).join(', ') - : '[first render]', - ); - } } value = resolver(); @@ -877,7 +877,7 @@ export function memo(Component: T, debugKey?: string) { // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps Object.values(props), debugKey, - DEBUG_resolveComponentName(renderingInstance.Component), + DEBUG_MORE ? DEBUG_resolveComponentName(renderingInstance.Component) : undefined, ); } diff --git a/src/lib/teact/teactn.tsx b/src/lib/teact/teactn.tsx index 572ca7fb3..86aeed86b 100644 --- a/src/lib/teact/teactn.tsx +++ b/src/lib/teact/teactn.tsx @@ -5,7 +5,7 @@ import { requestMeasure } from '../fasterdom/fasterdom'; import { DEBUG, DEBUG_MORE } from '../../config'; import { throttleWithTickEnd } from '../../util/schedulers'; -import arePropsShallowEqual, { getUnequalProps } from '../../util/arePropsShallowEqual'; +import arePropsShallowEqual, { logUnequalProps } from '../../util/arePropsShallowEqual'; import { orderBy } from '../../util/iteratees'; import { handleError } from '../../util/handleError'; @@ -198,12 +198,10 @@ function updateContainers() { if (Object.keys(newMappedProps).length && !arePropsShallowEqual(mappedProps!, newMappedProps)) { if (DEBUG_MORE) { - // eslint-disable-next-line no-console - console.log( - '[TeactN] Will update', - container.DEBUG_componentName, - 'caused by', - getUnequalProps(mappedProps!, newMappedProps).join(', '), + logUnequalProps( + mappedProps!, + newMappedProps, + `[TeactN] Will update ${container.DEBUG_componentName} caused by:`, ); } diff --git a/src/util/arePropsShallowEqual.ts b/src/util/arePropsShallowEqual.ts index ade4c4640..56330a779 100644 --- a/src/util/arePropsShallowEqual.ts +++ b/src/util/arePropsShallowEqual.ts @@ -25,20 +25,23 @@ export default function arePropsShallowEqual(currentProps: AnyLiteral, newProps: return true; } -export function getUnequalProps(currentProps: AnyLiteral, newProps: AnyLiteral) { +export function logUnequalProps(currentProps: AnyLiteral, newProps: AnyLiteral, msg: string, debugKey = '') { const currentKeys = Object.keys(currentProps); const currentKeysLength = currentKeys.length; const newKeysLength = Object.keys(newProps).length; if (currentKeysLength !== newKeysLength) { - return ['%LENGTH%']; + // eslint-disable-next-line no-console + console.log(`${msg} LENGTH`); + return; } - return currentKeys.reduce((res, prop) => { + // eslint-disable-next-line no-console + console.log(msg); + currentKeys.forEach((res, prop) => { if (currentProps[prop] !== newProps[prop]) { - res.push(`${prop}: ${currentProps[prop]} => ${newProps[prop]}`); + // eslint-disable-next-line no-console + console.log(debugKey, prop, ':', currentProps[prop], '=>', newProps[prop]); } - - return res; - }, [] as string[]); + }); }