Alex Lohr Comments - Answer Overflow

Alex Lohr

•Created by hyperknot on 2/13/2025 in #support

How do I best have createMemo in a store?

and isn't it a problem to have a createRoot per store?

It shouldn't be. createRoot just initializes a shared reactive context to which effects and computations can be subscribed and returns its output.

11 replies

SSolidJS

•Created by anthy on 2/14/2025 in #support

Initial search params

You could guard createAsync against fetching without searchParams:

function SearchPage() {
  const [searchParam, setSearchParam] = useSearchParams();
  const defaultParams = getDefaultParamsFromStorage();
  if (!isValidSearch(searchParam)) setSearchParam(defaultParams);
  const data = createAsync(() => isValidSearch(searchParam) && getData(searchParams));
  return <div>{data()}</div>
}

function SearchPage() {
  const [searchParam, setSearchParam] = useSearchParams();
  const defaultParams = getDefaultParamsFromStorage();
  if (!isValidSearch(searchParam)) setSearchParam(defaultParams);
  const data = createAsync(() => isValidSearch(searchParam) && getData(searchParams));
  return <div>{data()}</div>
}

6 replies

SSolidJS

•Created by anthy on 2/14/2025 in #support

Initial search params

Why would this initial search params need to be visible?

6 replies

SSolidJS

•Created by hyperknot on 2/13/2025 in #support

How do I best have createMemo in a store?

Something like this:

export const [store, setStore] = createRoot(() => {
  return [store, setStore] = createStore({
    state: { activeDocumentId: null },
    isActive: createSelector(() => store.state.activeDocumentId, (id, _) => id === store.state.uuid)
});

export const [store, setStore] = createRoot(() => {
  return [store, setStore] = createStore({
    state: { activeDocumentId: null },
    isActive: createSelector(() => store.state.activeDocumentId, (id, _) => id === store.state.uuid)
});

11 replies

SSolidJS

•Created by hyperknot on 2/13/2025 in #support

How do I best have createMemo in a store?

You need to wrap the creation of the store and any computations in a createRoot.

11 replies

SSolidJS

•Created by hyperknot on 2/13/2025 in #support

How do I best have createMemo in a store?

That being said, if you still want to put this inside your store, getters inside your stores will work. You will probably need to figure out circular dependencies.

11 replies

SSolidJS

•Created by hyperknot on 2/13/2025 in #support

How do I best have createMemo in a store?

It's totally fine to split your state into multiple references. In any case, your code looks like a prime use case for createSelector: https://docs.solidjs.com/reference/secondary-primitives/create-selector

11 replies

SSolidJS

•Created by oke on 2/11/2025 in #support

SSG isn't truly static

Then you need not "use server", because that's running the function on the server after the page was rendered. Just run the randomization once directly in the scope of the component.

20 replies

SSolidJS

•Created by quinnvaughn on 1/14/2025 in #support

How to share async data inside a context

The problem here is the const currentPlan = query.plans[0], which takes the data out of the proxy that tracks reactive changes. The solution is to return a function instead of a value: const currentPlan = () => query.plans[0].

6 replies

SSolidJS

•Created by JonathanExcelsior on 1/12/2025 in #support

createSignal vs createStore

That's what I said: try to split up state into multiple signals. Ofc, there may also be the case where a state object changes rarely but the expected changes are large enough to warrant a full re-render in any case. Do not waste time to optimize reactivity that is already sufficiently performant.

6 replies

SSolidJS

•Created by JonathanExcelsior on 1/12/2025 in #support

createSignal vs createStore

Thanks.

6 replies

SSolidJS

•Created by JonathanExcelsior on 1/12/2025 in #support

createSignal vs createStore

I hope this provides an answer: https://dev.to/lexlohr/the-zen-of-state-in-solidjs-22lj

6 replies

SSolidJS

•Created by Mia on 12/19/2024 in #support

How do I manually implement hydration for a component?

<Hydration>...</Hydration> and <NoHydration></NoHydration> are currently undocumented features AFAIK.

3 replies

SSolidJS

•Created by Mirardes on 12/19/2024 in #support

Need help to convice developers to go to SolidJS

Look at a component. How many parts of that code actually need to run again and again every time the state changes? I would say less than 25% in most cases. With React, you usually try to minimize the time spent on this by cutting smaller components, otherwise you get performance issues easily. With Solid, you know that static parts will be rendered once and never touched again until cleanup. Instead of running component functions again, we only run the parts where changes occur. However, this means the underlying mindset is completely different. We do not have hook rules since we do not rely on ref counting, but we have props proxies, so we cannot destructure props, lest we lose their reactivity. In React, useState, useMemo and useEffects are trap doors out of re-running code, whlie in Solid, it is the opposite. Also, we can actually manage state pretty efficiently without external libraries.

9 replies

SSolidJS

•Created by slainless on 12/10/2024 in #support

How to improve list rendering performance?

Even if you used a memo, the object equality comparison would trigger on a new array. So the solution would be a pattern like

let unchanged = true, previouslyFiltered = [], previousMatched;
const matched = strings.filter((str, i) => {
  const filtered = exclude(str);
  unchanged = unchanged && previouslyFiltered[i] === filtered;
  previouslyFiltered[i] = filtered;
  return filtered;
});
const result = unchanged ? previousMatched : matched;
previousMatched = matched;
return result;

let unchanged = true, previouslyFiltered = [], previousMatched;
const matched = strings.filter((str, i) => {
  const filtered = exclude(str);
  unchanged = unchanged && previouslyFiltered[i] === filtered;
  previouslyFiltered[i] = filtered;
  return filtered;
});
const result = unchanged ? previousMatched : matched;
previousMatched = matched;
return result;

11 replies

SSolidJS

•Created by walid on 7/30/2023 in #support

SWC Support for SolidJS

One would have to map one AST format to another, which is a bother.

30 replies

SSolidJS

•Created by Eatham on 11/25/2024 in #support

Use an action for a form but stay on the same page?

Even if you post a request, the site usually changes to the URL in the action, showing the reply of a POST response.

5 replies

SSolidJS

•Created by Eatham on 11/25/2024 in #support

Use an action for a form but stay on the same page?

You either need the page that controls the action to go back to the previous page or to send the form through JS (or both).

5 replies

SSolidJS

•Created by walid on 7/30/2023 in #support

SWC Support for SolidJS

Maybe such a solution will be part of https://oxc.rs/ at some point.

30 replies

SSolidJS

•Created by walid on 7/30/2023 in #support

SWC Support for SolidJS

I think the solution will be something like using porffor to transpile plugin transformers into wasm to run them in a performant way directly from the rust code.

30 replies

Gaming

Programming