Optimize splitProps

[li-kai]

Summary

Following this reddit thread, I wanted to see if splitProps could be improved further:

1. Set is only faster when there are >100 elements. In practice, most components do not have so many keys.
2. Avoid spreading to concat
3. Logic can be simplified to remove 2 branches

How did you test this change?

cd packages/solid
pnpm t

FILTER=splitProps-store pnpx vitest bench --run

BENCH Summary

splitProps - packages/solid/test/component.bench.ts > splitProps-store(5, 1)
1.26x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(2, 15)
2.64x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(2, 100)
14.59x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(0, 15)
2.71x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(25, 5)
1.50x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(25, 100)
15.96x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(50, 100)
14.48x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(100, 25)
4.46x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(5, 1, 2)
1.20x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(2, 3, 2)
1.21x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-store(2, 100, 3, 2)
2.43x faster than oldSplitProps

FILTER=splitProps-mixed pnpx vitest bench --run

BENCH Summary

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(5, 1)
1.01x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(2, 15)
1.04x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(2, 100)
1.07x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(0, 15)
1.15x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(25, 5)
1.03x faster than oldSplitProps

oldSplitProps - packages/solid/test/component.bench.ts > splitProps-mixed(25, 100)
1.02x faster than splitProps

oldSplitProps - packages/solid/test/component.bench.ts > splitProps-mixed(50, 100)
1.06x faster than splitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(100, 25)
1.04x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(5, 1, 2)
1.25x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(2, 3, 2)
1.74x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-mixed(2, 100, 3, 2)
2.40x faster than oldSplitProps

FILTER=splitProps-static pnpx vitest bench --run

BENCH Summary

splitProps - packages/solid/test/component.bench.ts > splitProps-static(5, 1)
1.08x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(2, 15)
1.20x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(2, 100)
1.21x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(0, 15)
1.23x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(25, 5)
1.03x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(25, 100)
1.14x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(50, 100)
1.10x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(100, 25)
1.25x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(5, 1, 2)
1.15x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(2, 3, 2)
1.39x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-static(2, 100, 3, 2)
1.45x faster than oldSplitProps

FILTER=splitProps-signal pnpx vitest bench --run

BENCH Summary

oldSplitProps - packages/solid/test/component.bench.ts > splitProps-signal(5, 1)
1.01x faster than splitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(2, 15)
1.03x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(2, 100)
1.01x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(0, 15)
1.18x faster than oldSplitProps

oldSplitProps - packages/solid/test/component.bench.ts > splitProps-signal(25, 5)
1.01x faster than splitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(25, 100)
1.01x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(50, 100)
1.11x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(100, 25)
1.00x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(5, 1, 2)
1.20x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(2, 3, 2)
1.85x faster than oldSplitProps

splitProps - packages/solid/test/component.bench.ts > splitProps-signal(2, 100, 3, 2)
2.65x faster than oldSplitProps

And some browser tests on macOS with a modified bench forked from the reddit post. Times are in milliseconds:

Original splitProps

Test Name	Chrome	Firefox	Safari
Kobalte	100.8	172.3	157.1
Ark UI	174.3	273.8	233.4
SUID	197.2	356.0	382.9

Optimized splitProps

Test Name	Chrome	Firefox	Safari	Avg mprovement (%)
Kobalte	93.9	158.3	152.6	5.95%
Ark UI	166.6	236.5	262.3	1.89%
SUID	190.8	330.4	350.6	6.29%

[changeset-bot]

🦋 Changeset detected

Latest commit: 8bbc610

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
solid-js	Patch
test-integration	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR