perf: avoid unnecessary re-renders

[nolanlawson]

This is an experiment where we avoid additional re-renders by 1) not forcing an update to the state is object equality is still the same, and 2) avoiding an extra re-render if the browser supports all ZWJ-containing emoji.

Probably needs a battery of tests before it can be merged, but opening the PR anyway.

[github-actions]

📊 Tachometer Benchmark Results

Summary

benchmark-total

• emoji-picker-element-change-tab: unsure 🔍 -8% - +1% (-2.90ms - +0.26ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-database-interactions: unsure 🔍 -5% - +3% (-5.08ms - +3.08ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-first-load: unsure 🔍 -6% - +3% (-3.38ms - +1.81ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-search: unsure 🔍 -1% - +8% (-0.18ms - +3.73ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-second-load: unsure 🔍 -4% - +3% (-1.85ms - +1.23ms)
  ^{this-change vs tip-of-tree}

Results

emoji-picker-element-change-tab

• Browser: chrome-headless 127.0.6533.99
• Sample size: 50
• Built by: Benchmarks #464

• Commit: fc58af5

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	33.09ms - 34.84ms	-	unsure 🔍 -8% - +1% -2.90ms - +0.26ms
tip-of-tree tip-of-tree	33.98ms - 36.60ms	unsure 🔍 -1% - +9% -0.26ms - +2.90ms	-

emoji-picker-element-database-interactions

• Browser: chrome-headless 127.0.6533.99
• Sample size: 50
• Built by: Benchmarks #464

• Commit: fc58af5

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	100.31ms - 105.95ms	-	unsure 🔍 -5% - +3% -5.08ms - +3.08ms
tip-of-tree tip-of-tree	101.18ms - 107.08ms	unsure 🔍 -3% - +5% -3.08ms - +5.08ms	-

emoji-picker-element-first-load

• Browser: chrome-headless 127.0.6533.99
• Sample size: 50
• Built by: Benchmarks #464

• Commit: fc58af5

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	49.85ms - 53.17ms	-	unsure 🔍 -6% - +3% -3.38ms - +1.81ms
tip-of-tree tip-of-tree	50.29ms - 54.29ms	unsure 🔍 -4% - +7% -1.81ms - +3.38ms	-

emoji-picker-element-search

• Browser: chrome-headless 127.0.6533.99
• Sample size: 50
• Built by: Benchmarks #464

• Commit: fc58af5

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	47.32ms - 49.50ms	-	unsure 🔍 -1% - +8% -0.18ms - +3.73ms
tip-of-tree tip-of-tree	45.02ms - 48.26ms	unsure 🔍 -8% - +0% -3.73ms - +0.18ms	-

emoji-picker-element-second-load

• Browser: chrome-headless 127.0.6533.99
• Sample size: 50
• Built by: Benchmarks #464

• Commit: fc58af5

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	42.89ms - 45.08ms	-	unsure 🔍 -4% - +3% -1.85ms - +1.23ms
tip-of-tree tip-of-tree	43.21ms - 45.38ms	unsure 🔍 -3% - +4% -1.23ms - +1.85ms	-

_{tachometer-reporter-action v2 for Benchmarks}

[github-actions]

Size Change: +57 B (+0.16%)

Total Size: 36.4 kB

Filename	Size	Change
./bundle.js	36.4 kB	+57 B (+0.16%)

_{compressed-size-action}

[nolanlawson]

Had to bump up the CPU throttling to 20 and reduce auto sample condition to 1% to see the impact, but it is an improvement:

Click to see

./test/benchmark/change-tab.tachometer.json

Re-using git checkout:
  https://github.com/nolanlawson/emoji-picker-element.git#master
  /tmp/tachometer/versions/3e29c34f458a7f02a160e0f60aef088c5e5f0c00f24ba5dbd586c6f1db4d54a3


Re-using NPM install dir:
 /tmp/tachometer/versions/0cc70e69a5fe3d08fac07633318d157d8ebcc643026d2a6a7225828505bed31d

[----------------------------------------------------------] launching chromeRunning benchmarks

[==========================================================] done



┌─────────────┬─────────────────┐
│     Browser │ chrome-headless │
│             │ 127.0.6533.99   │
├─────────────┼─────────────────┤
│ Sample size │ 100             │
└─────────────┴─────────────────┘

┌─────────────┬─────────────┬────────────┬─────────────────────┬───────────────────┬───────────────────┐
│ Benchmark   │ Version     │ Bytes      │            Avg time │    vs this-change │    vs tip-of-tree │
│             │             │            │                     │                   │       tip-of-tree │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ this-change │ <none>      │ 860.32 KiB │ 375.50ms - 379.10ms │                   │            faster │
│             │             │            │                     │          -        │          8% - 10% │
│             │             │            │                     │                   │ 33.65ms - 39.94ms │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ tip-of-tree │ tip-of-tree │ 859.73 KiB │ 411.51ms - 416.67ms │            slower │                   │
│             │             │            │                     │          9% - 11% │          -        │
│             │             │            │                     │ 33.65ms - 39.94ms │                   │
└─────────────┴─────────────┴────────────┴─────────────────────┴───────────────────┴───────────────────┘

./test/benchmark/database-interactions.tachometer.json

Re-using git checkout:
  https://github.com/nolanlawson/emoji-picker-element.git#master
  /tmp/tachometer/versions/3e29c34f458a7f02a160e0f60aef088c5e5f0c00f24ba5dbd586c6f1db4d54a3


Re-using NPM install dir:
 /tmp/tachometer/versions/0cc70e69a5fe3d08fac07633318d157d8ebcc643026d2a6a7225828505bed31d

[----------------------------------------------------------] launching chromeRunning benchmarks

[==========================================================] done

⠋ Auto-sample 50 (timeout in 3m6s)

┌─────────────┬─────────────────┐
│     Browser │ chrome-headless │
│             │ 127.0.6533.99   │
├─────────────┼─────────────────┤
│ Sample size │ 150             │
└─────────────┴─────────────────┘

┌─────────────┬─────────────┬────────────┬─────────────────────┬───────────────────┬───────────────────┐
│ Benchmark   │ Version     │ Bytes      │            Avg time │    vs this-change │    vs tip-of-tree │
│             │             │            │                     │                   │       tip-of-tree │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ this-change │ <none>      │ 860.41 KiB │ 938.25ms - 948.35ms │                   │            unsure │
│             │             │            │                     │          -        │         -0% - +1% │
│             │             │            │                     │                   │ -4.58ms - +9.29ms │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ tip-of-tree │ tip-of-tree │ 859.81 KiB │ 936.20ms - 945.70ms │            unsure │                   │
│             │             │            │                     │         -1% - +0% │          -        │
│             │             │            │                     │ -9.29ms - +4.58ms │                   │
└─────────────┴─────────────┴────────────┴─────────────────────┴───────────────────┴───────────────────┘

./test/benchmark/first-load.tachometer.json

Re-using git checkout:
  https://github.com/nolanlawson/emoji-picker-element.git#master
  /tmp/tachometer/versions/3e29c34f458a7f02a160e0f60aef088c5e5f0c00f24ba5dbd586c6f1db4d54a3


Re-using NPM install dir:
 /tmp/tachometer/versions/0cc70e69a5fe3d08fac07633318d157d8ebcc643026d2a6a7225828505bed31d

[----------------------------------------------------------] launching chromeRunning benchmarks

[==========================================================] done



┌─────────────┬─────────────────┐
│     Browser │ chrome-headless │
│             │ 127.0.6533.99   │
├─────────────┼─────────────────┤
│ Sample size │ 100             │
└─────────────┴─────────────────┘

┌─────────────┬─────────────┬────────────┬─────────────────────┬──────────────────┬──────────────────┐
│ Benchmark   │ Version     │ Bytes      │            Avg time │   vs this-change │   vs tip-of-tree │
│             │             │            │                     │                  │      tip-of-tree │
├─────────────┼─────────────┼────────────┼─────────────────────┼──────────────────┼──────────────────┤
│ this-change │ <none>      │ 860.12 KiB │ 579.16ms - 590.11ms │                  │           faster │
│             │             │            │                     │         -        │          1% - 4% │
│             │             │            │                     │                  │ 8.29ms - 23.14ms │
├─────────────┼─────────────┼────────────┼─────────────────────┼──────────────────┼──────────────────┤
│ tip-of-tree │ tip-of-tree │ 859.52 KiB │ 595.33ms - 605.36ms │           slower │                  │
│             │             │            │                     │          1% - 4% │         -        │
│             │             │            │                     │ 8.29ms - 23.14ms │                  │
└─────────────┴─────────────┴────────────┴─────────────────────┴──────────────────┴──────────────────┘

./test/benchmark/search.tachometer.json

Re-using git checkout:
  https://github.com/nolanlawson/emoji-picker-element.git#master
  /tmp/tachometer/versions/3e29c34f458a7f02a160e0f60aef088c5e5f0c00f24ba5dbd586c6f1db4d54a3


Re-using NPM install dir:
 /tmp/tachometer/versions/0cc70e69a5fe3d08fac07633318d157d8ebcc643026d2a6a7225828505bed31d

[----------------------------------------------------------] launching chromeRunning benchmarks

[==========================================================] done



┌─────────────┬─────────────────┐
│     Browser │ chrome-headless │
│             │ 127.0.6533.99   │
├─────────────┼─────────────────┤
│ Sample size │ 100             │
└─────────────┴─────────────────┘

┌─────────────┬─────────────┬────────────┬─────────────────────┬───────────────────┬───────────────────┐
│ Benchmark   │ Version     │ Bytes      │            Avg time │    vs this-change │    vs tip-of-tree │
│             │             │            │                     │                   │       tip-of-tree │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ this-change │ <none>      │ 860.41 KiB │ 260.63ms - 264.09ms │                   │            faster │
│             │             │            │                     │          -        │         16% - 18% │
│             │             │            │                     │                   │ 51.98ms - 57.24ms │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ tip-of-tree │ tip-of-tree │ 859.82 KiB │ 314.99ms - 318.95ms │            slower │                   │
│             │             │            │                     │         20% - 22% │          -        │
│             │             │            │                     │ 51.98ms - 57.24ms │                   │
└─────────────┴─────────────┴────────────┴─────────────────────┴───────────────────┴───────────────────┘

./test/benchmark/second-load.tachometer.json

Re-using git checkout:
  https://github.com/nolanlawson/emoji-picker-element.git#master
  /tmp/tachometer/versions/3e29c34f458a7f02a160e0f60aef088c5e5f0c00f24ba5dbd586c6f1db4d54a3


Re-using NPM install dir:
 /tmp/tachometer/versions/0cc70e69a5fe3d08fac07633318d157d8ebcc643026d2a6a7225828505bed31d

[----------------------------------------------------------] launching chromeRunning benchmarks

[==========================================================] done



┌─────────────┬─────────────────┐
│     Browser │ chrome-headless │
│             │ 127.0.6533.99   │
├─────────────┼─────────────────┤
│ Sample size │ 100             │
└─────────────┴─────────────────┘

┌─────────────┬─────────────┬────────────┬─────────────────────┬───────────────────┬───────────────────┐
│ Benchmark   │ Version     │ Bytes      │            Avg time │    vs this-change │    vs tip-of-tree │
│             │             │            │                     │                   │       tip-of-tree │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ this-change │ <none>      │ 860.47 KiB │ 431.10ms - 438.57ms │                   │            faster │
│             │             │            │                     │          -        │           3% - 5% │
│             │             │            │                     │                   │ 11.90ms - 23.23ms │
├─────────────┼─────────────┼────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ tip-of-tree │ tip-of-tree │ 859.88 KiB │ 448.14ms - 456.66ms │            slower │                   │
│             │             │            │                     │           3% - 5% │          -        │
│             │             │            │                     │ 11.90ms - 23.23ms │                   │
└─────────────┴─────────────┴────────────┴─────────────────────┴───────────────────┴───────────────────┘