chore: log info about micro and macro tasks

Author: mdjastrzebski

experiments-app/src/screens/TextInputEvents.tsx

@@ -1,20 +1,23 @@
 import * as React from 'react';
 import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
+import { buildEventLogger, logEvent } from '../utils/helpers';
 
 const handlePressIn = buildEventLogger('pressIn');
 const handlePressOut = buildEventLogger('pressOut');
 const handleFocus = buildEventLogger('focus');
 const handleBlur = buildEventLogger('blur');
 const handleChange = buildEventLogger('change');
 const handleSubmitEditing = buildEventLogger('submitEditing');
+const handleKeyPress = buildEventLogger('keyPress');
+const handleTextInput = buildEventLogger('textInput');
+const handleSelectionChange = buildEventLogger('selectionChange');
 
 export function TextInputEvents() {
   const [value, setValue] = React.useState('');
 
   const handleChangeText = (value: string) => {
     setValue(value);
-    console.log(`Event: changeText`, value);
+    logEvent('changeText', value);
   };
 
   return (
@@ -30,6 +33,9 @@ export function TextInputEvents() {
         onBlur={handleBlur}
         onChange={handleChange}
         onSubmitEditing={handleSubmitEditing}
+        onSelectionChange={handleSelectionChange}
+        onKeyPress={handleKeyPress}
+        onTextInput={handleTextInput}
       />
     </SafeAreaView>
   );

experiments-app/src/utils/helpers.ts

@@ -2,7 +2,19 @@ import { NativeSyntheticEvent } from 'react-native/types';
 
 export function buildEventLogger(name: string) {
   return (event: NativeSyntheticEvent<unknown>) => {
-    const eventData = event?.nativeEvent ?? event;
-    console.log(`Event: ${name}`, eventData);
+    const payload = event?.nativeEvent ?? event;
+    logEvent(name, payload);
   };
 }
+
+export function logEvent(name: string, payload: unknown) {
+  console.log(`Event: ${name}`, payload);
+
+  queueMicrotask(() => {
+    console.log(` - ${name} (microtask)`);
+  });
+
+  setTimeout(() => {
+    console.log(` - ${name} (macrotask)`);
+  }, 0);
+}