Commits on Nov 18, 2025

1. Add expertimental optimisticKey behind a flag (#35162) …

   When dealing with optimistic state, a common problem is not knowing the
   id of the thing we're waiting on. Items in lists need keys (and single
   items should often have keys too to reset their state). As a result you
   have to generate fake keys. It's a pain to manage those and when the
   real item comes in, you often end up rendering that with a different
   `key` which resets the state of the component tree. That in turns works
   against the grain of React and a lot of negatives fall out of it.
   
   This adds a special `optimisticKey` symbol that can be used in place of
   a `string` key.
   
   ```js
   import {optimisticKey} from 'react';
   ...
   const [optimisticItems, setOptimisticItems] = useOptimistic([]);
   const children = savedItems.concat(
     optimisticItems.map(item =>
       <Item key={optimisticKey} item={item} />
     )
   );
   return <div>{children}</div>;
   ```
   
   The semantics of this `optimisticKey` is that the assumption is that the
   newly saved item will be rendered in the same slot as the previous
   optimistic items. State is transferred into whatever real key ends up in
   the same slot.
   
   This might lead to some incorrect transferring of state in some cases
   where things don't end up lining up - but it's worth it for simplicity
   in many cases since dealing with true matching of optimistic state is
   often very complex for something that only lasts a blink of an eye.
   
   If a new item matches a `key` elsewhere in the set, then that's favored
   over reconciling against the old slot.
   
   One quirk with the current algorithm is if the `savedItems` has items
   removed, then the slots won't line up by index anymore and will be
   skewed. We might be able to add something where the optimistic set is
   always reconciled against the end. However, it's probably better to just
   assume that the set will line up perfectly and otherwise it's just best
   effort that can lead to weird artifacts.
   
   An `optimisticKey` will match itself for updates to the same slot, but
   it will not match any existing slot that is not an `optimisticKey`. So
   it's not an `any`, which I originally called it, because it doesn't
   match existing real keys against new optimistic keys. Only one
   direction.

   

   sebmarkbage authored Nov 18, 2025
   Configuration menu

   • View commit details
   • Copy full SHA for eb89912
   • Browse repository at this point

   Copy the full SHA

   eb89912 View commit details

   Browse the repository at this point in the history