SolidJS•13mo ago

1. arguments to useTransition() 2. measuring async updates

quicker one this time :) 1. looking at the official docs for useTransition:

import { useTransition } from "solid-js";



function useTransition(): [

  pending: () => boolean,

  startTransition: (fn: () => void) => Promise<void>

];
// example
start(() => setSignal(newValue), () => /* transition is done */)

import { useTransition } from "solid-js";



function useTransition(): [

  pending: () => boolean,

  startTransition: (fn: () => void) => Promise<void>

];
// example
start(() => setSignal(newValue), () => /* transition is done */)

start is taking two arguments in the example, but only takes one in the typescript. Is the second argument just undocumented? something like

function useTransition(): [
  pending: () => boolean,
  startTransition: (applyTransition: () => void, onTransitionComplete: () => void) => Promise<void> // promise returns when transition completes as well
];

function useTransition(): [
  pending: () => boolean,
  startTransition: (applyTransition: () => void, onTransitionComplete: () => void) => Promise<void> // promise returns when transition completes as well
];

and I guess is there a preference between using the second arg and the promise assuming they both measure the same thing? 2. This question is a bit larger than just async but it's coming up because I want to be able to measure the impact using async has on the latency of my app. The most straightforward way to do that is to add a profiler mark before solidjs has done any rendering, and then add a profiler mark after solidjs is "done". the thing is, I'm not sure how to define "done" or if there is even an API for it! My naive guess would be when the effect stack has "cleared" ie, we are at 0 render effects or effects, so the only thing that could cause an update would be an external/DOM event, but I don't see any way to track that just based on the public API.

2 Replies

mdynnl•13mo ago

https://github.com/solidjs/solid/releases#:~:text=startTransition%20no%20longer%20takes%20callback%20as%20a%20second%20argument https://github.com/solidjs/solid/releases/tag/v1.3.0#:~:text=startTransition%20no%20longer%20takes%20callback%20as%20a%20second%20argument

alloyedOP•13mo ago

startTransition no longer takes callback as a second argument

Instead it returns a promise you can await. This works better for chaining sequences of actions.

const [start, isPending] = useTransition();

start(() => doSomething()).then(() => allDone());

startTransition no longer takes callback as a second argument

Instead it returns a promise you can await. This works better for chaining sequences of actions.

const [start, isPending] = useTransition();

start(() => doSomething()).then(() => allDone());

gotcha, so the answer to #1 is "the type signature is right the docs are wrong", cool

Gaming

Programming

1. arguments to useTransition() 2. measuring async updates