Lanes

Every yellow flash is a re-render. Interact with the demo, spot what shouldn't be flashing, then open the solution tab to see the fix.

1

Exercise 1 of 1

Lanes & startTransition

Filter 2,000 items with and without startTransition. Feel the difference between a blocking SyncLane update and an interruptible TransitionLane update.

interact to see yellow flashes →
No startTransition — input blocks on every keystroke

Search input (SyncLane)

renders: 1

Type quickly — notice the input lag. React won't paint the new character until the list filter finishes.

Results (2000)

renders: 1
  • alpha-0001
  • bravo-0002
  • charlie-0003
  • delta-0004
  • echo-0005
  • foxtrot-0006
  • golf-0007
  • hotel-0008
  • india-0009
  • juliet-0010
  • kilo-0011
  • lima-0012
  • mike-0013
  • november-0014
  • oscar-0015
  • alpha-0016
  • bravo-0017
  • charlie-0018
  • delta-0019
  • echo-0020
  • foxtrot-0021
  • golf-0022
  • hotel-0023
  • india-0024
  • juliet-0025
  • kilo-0026
  • lima-0027
  • mike-0028
  • november-0029
  • oscar-0030
  • alpha-0031
  • bravo-0032
  • charlie-0033
  • delta-0034
  • echo-0035
  • foxtrot-0036
  • golf-0037
  • hotel-0038
  • india-0039
  • juliet-0040
  • kilo-0041
  • lima-0042
  • mike-0043
  • november-0044
  • oscar-0045
  • alpha-0046
  • bravo-0047
  • charlie-0048
  • delta-0049
  • echo-0050
  • …and 1950 more