What does useTransition do in Context? #929

import { Accessor, Component, createContext, createEffect, createSignal, JSX, useContext, useTransition } from 'solid-js';
import { Dynamic } from 'solid-js/web';

const CounterContext = createContext<{ count: Accessor<number>, setCount: (count: number) => void}>()

const One = () => {
  return <button onclick={() => {
    const count = useContext(CounterContext)
    console.log(count?.count());
  }}>Click One</button>
}

const Two = () => {
  return <button onclick={() => {
    const count = useContext(CounterContext)
    console.log(count?.count());
  }}>Click Two</button>
}

const getContent = () => {
  return () => {
    const [, start] = useTransition()
    const [comp, setComp] = createSignal<() => JSX.Element | undefined>()
    const count = useContext(CounterContext)
    createEffect(() => {
      // if (count!.count() % 2 === 0) {
      //   setComp(() => One);
      // } else {
      //   setComp(() => Two);
      // }
      start(() => {
        if (count!.count() % 2 === 0) {
          setComp(() => One);
        } else {
          setComp(() => Two);
        }
      })
    })
    return <Dynamic component={comp()}></Dynamic>
  }
}

const Content = () => {
  const C = getContent()
  return <div>
    <C />
  </div>
}

const App: Component = () => {
  const [count, setCount] = createSignal(0)
  return (
    <CounterContext.Provider value={{ count, setCount}}>
      <Content />
      <button onclick={() => setCount(count() + 1)}>add</button>
    </CounterContext.Provider>
  );
};

export default App;

start(() => {
        if (count!.count() % 2 === 0) {
          setComp(() => One);
        } else {
          setComp(() => Two);
        }
})

    if (count!.count() % 2 === 0) {
          setComp(() => One);
        } else {
          setComp(() => Two);
     }