DEBUG ME CHALLENGE

Note:
It seems `done` on line 82 is executed once (log on line 88), but the callback
of `setMsgs` is executed multiple times (log on line 92). It is expected to
execute only once, or line 56 would fail because `custom` is already parsed.

More strangely, uncommenting `try-catch` on line 54,57-59 seems to change this
multi-execute behavior/bug mysteriously. `catch` seems never executed (log on
line 58) and `setMsgs` callback seems only executes once (log on line 92).

Theorically it should be related to inplace mutation of `obj.msgs`/`msg.custom`,
but the behavior above looks more like a React codegen issue. Tracing up to the
multi-execute of callback is hard.

However, with `console.trace` or `obj.debug` (a mutating counter), or with
`debugger` or breakpoint, we can see that it actually execute 3 times without
`try-catch` and 2 times with it, (rather than 2 vs 1). For some reason
`console.log` does not work on the 2nd execution (1st and 3rd ok) but
`console.trace` works all the time. Similarly, the `catch` on line 58 is
executed but its `console.log` is muted because it is during 2nd run.

This makes a little bit more sense. With `try-catch`, the 2nd execution is no-op
and nothing gets mutated. So it works as expected. Without it, the 2nd execution
throws and somehow React decides to run it 3rd time, which finally make React
unhappy.

It is left unknown why `console.log` is less useful than `console.trace`. And
whether/how React's multi-execution of callback is related to mutation of object
captured by the closure. But anyways, the action should be a descriptive object
and reducer should be pure (or at least idempotent here).

React.StrictMode calls the callback twice intentionally.
facebook/react#12856 (comment)
Note that parsing and reversing was outside `setMsgs` in `HEAD^`, so it executes
only once as expected. For performance, we may extract sanitization unrelated to
`msgsPrev` (eg. !resend and parsing) outside of `setMsgs`.

`console.log` was overwritten as `function disabledLog() {}` by React during the
2nd call to hide its side effects.

Author: srand

src/Room.js

@@ -41,10 +41,41 @@ export const Room = props => {
 	const ondisconnect = (...args) => { console.log('d', args); };
 	const onerror = (...args) => { console.log('e', args); };
 	const onmsgs = msgs => {
-		msgs.forEach(msg => {msg.custom = JSON.parse(msg.custom || null);});
-		setMsgs(msgsPrev => [...msgsPrev, ...msgs]);
+		setMsgs(msgsPrev => {
+			msgs = sanitizeDelta(msgs, msgsPrev, 'dupNew');
+			return [...msgsPrev, ...msgs];
+		});
 		console.log(msgs);
 	};
+	const sanitizeDelta = (msgs, msgsPrev, tag) => {
+		// debugger;
+		msgs = msgs.filter(msg => !msg.resend);
+		msgs.forEach((msg, idx) => {
+			// try {
+				// if (msg.custom && typeof msg.custom !== 'string') debugger;
+				msg.custom = JSON.parse(msg.custom || null);
+			// } catch (e) {
+			// 	console.log('catch', e, msg);
+			// }
+		});
+		// Mostly unnecessary after `resend` check.
+		// But consecutive button clicks can send dup requests.
+		const byKey = new Map(msgsPrev.map((msg, idx) => [msg.idClient, idx]));
+		// console.log('sanitize', byKey, msgs);
+		const lookup = msgs.map((msg, idx) => [idx, msg, byKey.get(msg.idClient)]);
+		const dups = lookup.filter(
+			([idx, msg, idxEx]) => idxEx !== undefined
+		).map(
+			([idx, msg, idxEx]) => [idx, msg, idxEx, msgsPrev[idxEx]]
+		);
+		if (dups.length > 0) console.log(tag, dups);
+		msgs = lookup.filter(
+			([idx, msg, idxEx]) => idxEx === undefined
+		).map(
+			([idx, msg, idxEx]) => msg
+		);
+		return msgs;
+	};
 	const earlier = () => {
 		chatroom.getHistoryMsgs({
 			timetag: msgsView[0]?.time,
@@ -54,8 +85,16 @@ export const Room = props => {
 					return;
 				}
 				obj.msgs.reverse();
-				obj.msgs.forEach(msg => {msg.custom = JSON.parse(msg.custom || null);});
-				setMsgs(msgsPrev => [...obj.msgs, ...msgsPrev]);
+				console.log('debug-done');
+				const doneTime = new Date();
+				setMsgs(msgsPrev => {
+					obj.debug = (obj.debug || 0) + 1;
+					// console.log('debug-setMsgs', doneTime, obj, msgsView);
+					console.trace('debug-setMsgs', doneTime, obj, msgsView, console.log);
+					// debugger;
+					obj.msgs = sanitizeDelta(obj.msgs, msgsPrev, 'dupHist');
+					return [...obj.msgs, ...msgsPrev];
+				});
 			},
 		});
 	};