alloyed Posts - Answer Overflow

alloyed

Posts Comments

SSolidJS

•Created by alloyed on 11/27/2023 in #support

implementation detail: enableScheduling uses MessageChannel API?

10 replies

SSolidJS

•Created by alloyed on 11/20/2023 in #support

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.

5 replies

SSolidJS

•Created by alloyed on 11/15/2023 in #support

stack overflow internal to solidjs?

Exception has occurred: RangeError: Maximum call stack size exceeded
at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:896:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)

Exception has occurred: RangeError: Maximum call stack size exceeded
at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:896:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)
    at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)
    at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17)

This occurs in dev mode but not in production? I still need to narrow down what is causing this / make a minimal repro, but the stack here isn't super helpful in doing that :/

15 replies

SSolidJS

•Created by alloyed on 11/7/2023 in #support

Where does <ErrorBoundary/> catch errors?

The docs example shows an error being caught at component creation which makes sense, but what about * createEffect() calls * onMount()/createRenderEffect() * JSX expressions * event handlers The react answer I think is that it wouldn't catch any of these cases, which seems less useful when the solid signal chains are doing all the computation

5 replies

SSolidJS

•Created by alloyed on 10/30/2023 in #support

encapsulating logic that uses refs?

Hi, so I'm porting a react app that does something like so (eliding lots of annoying extra details):

function useMyCustomHook(ref)
{
    useEffect(()=>{
        if(ref.current)
        {
            doSomethingWithRef(ref.current);
            return ()=> {cleanup(ref.current);}
        }
        return ()=> {doNothing();}
    }, [])
}

function MyComponent()
{
    const ref: React.RefObject<T> = ...;
    useMyCustomHook(ref);
    return <elment ref={ref} />
}

function useMyCustomHook(ref)
{
    useEffect(()=>{
        if(ref.current)
        {
            doSomethingWithRef(ref.current);
            return ()=> {cleanup(ref.current);}
        }
        return ()=> {doNothing();}
    }, [])
}

function MyComponent()
{
    const ref: React.RefObject<T> = ...;
    useMyCustomHook(ref);
    return <elment ref={ref} />
}

There's a problem with the naive translation of this:

function createCustomEffect(refB)
{
    createEffect(()=>{
        doSomethingWithRef(refB);
        onCleanup(()=> {cleanup(refB));
    });
}

function MyComponent()
{
    let refA: T = ...;
    createCustomEffect(refA);
    return <elment ref={refA} />
}

function createCustomEffect(refB)
{
    createEffect(()=>{
        doSomethingWithRef(refB);
        onCleanup(()=> {cleanup(refB));
    });
}

function MyComponent()
{
    let refA: T = ...;
    createCustomEffect(refA);
    return <elment ref={refA} />
}

which is that unlike react, which will rerun the hook if ref changes, and normally only changes ref.current to prevent this, solid will run the effect one with the initial value, and completely not notice that the refA changed. because of pass-by-value, refB is a copy of the original binding to the original value, not a reference to the refA binding. what alternate patterns should I be trying instead? some off-the-cuff thoughts: * put the ref into a signal ala ref={setSignal} * split out the doSomething() parts of the hook and the createEffect() part of the hook. In this world by convention you aren't actually allowed to encapsulate createEffect() calls, only the contents of them (with any dependency injection you need to pass in signals or w/e) * something else? bring back ref.current?

12 replies

Gaming

Programming