Problem with recommending startTransition in design system event handlers?

we generally recommend to bake useTransition into the design system components of your app
https://reactjs.org/docs/concurrent-mode-patterns.html#baking-transitions-into-the-design-system

 // Button component in design system event handler:

  function handleClick() {
    startTransition(() => {
      onClick();
    });
  }

Couldn't this lead to the problem mentioned later?

Try typing into the input now. Something’s wrong! The input is updating very slowly
https://reactjs.org/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state

The answer to this problem is to split the state in two parts: a “high priority” part that updates immediately, and a “low priority” part that may wait for a transition.

Solution:

function handleChange(e) {
  const value = e.target.value;
  
  // Outside the transition (urgent)
  setQuery(value);

  startTransition(() => {
    // Inside the transition (may be delayed)
    setResource(fetchTranslation(value));
  });
}

If your design system components wrap all their event handlers in startTransition then how would you make a setState call in your handler run outside of a transition?

Xem lại các phần Concurrent Mode Patterns được liên kết về việc đưa các transition vào các component của design system và tách state có độ ưu tiên cao và thấp. Sử dụng các ví dụ về event handler trong issue làm điểm bắt đầu; được xem là hoàn tất khi tài liệu giải thích rõ liệu các handler của design system có nên bọc các callback trong startTransition hay không, và cách các bản cập nhật khẩn cấp có thể vẫn nằm ngoài một transition.