Andreas Roth Comments - Answer Overflow

Topics

Andreas Roth

•Created by mrVinicius on 10/16/2024 in #support

Store with const obj values passed to it does not update.

Maybe to give an explanation: Internally, solid.js like to mutate things. By only updating instead of re-creating solid can achieve its finegrained reactivity. In your case, your initial object is mutated by solid as it's passed as the initial state to createStore. Thus, after you changed your UI, initialViewable is also changed. By creating a new object that you pass to createStore, the original object stays unchanged and can be used to properly reset.

11 replies

•Created by Andreas Roth on 9/16/2024 in #support

Cycles in dependency graph

No description

14 replies

•Created by Andreas Roth on 9/16/2024 in #support

Cycles in dependency graph

The general idea seems to work great 🙂 https://playground.solidjs.com/anonymous/9ae5490a-2034-4ebd-a276-19388d0f2b41

14 replies

•Created by Andreas Roth on 9/16/2024 in #support

Cycles in dependency graph

Wait no... The signal is the wrong place. The signal always already has a value, it can directly return it. Computeds can create cycles, so we need to wrap the computed, not the signal

14 replies

•Created by Andreas Roth on 9/16/2024 in #support

Cycles in dependency graph

Aah that is a really cool idea. I think we are using stores so we would probably need to wrap the proxy/getters in some way but the idea could still work out! Thanks for the input!

14 replies

•Created by Andreas Roth on 9/16/2024 in #support

Cycles in dependency graph

That's what I thought... Thanks for chiming in anyways 🙂

14 replies

•Created by lawftyg on 9/15/2024 in #support

best way to update multiple children in a multi timer app?

Solid is still a declarative framework. You don't imperatively call functions on children. You pass data down, and let the children decide what they want to do. So your parant would manage the time and would pass the time value down to children and if children need to manipulate the time (like reset, stop, start etc.) you simply pass down functions from the parent to the child. https://playground.solidjs.com/anonymous/9d2a881b-f396-487e-ad93-35ea7f34673f

2 replies

•Created by hannus on 8/22/2024 in #support

How can I make createEffect in SolidJS execute only when the dependency variable changes, and not wh

Could also easily be wrapped into a "hook" so that internalSetValue isn't even available to the outside.

18 replies

•Created by hannus on 8/22/2024 in #support

How can I make createEffect in SolidJS execute only when the dependency variable changes, and not wh

(Maybe a bit late, but anyways): I think this pattern is a code smell. This directly points us to move the logic into the event handler...

const [value, internalSetValue] = createSignal("");
function setValue(newValue: string) {
  localStorage.setItem("value", newValue);
  internalSetValue(newValue);
}

// ...

const [value, internalSetValue] = createSignal("");
function setValue(newValue: string) {
  localStorage.setItem("value", newValue);
  internalSetValue(newValue);
}

// ...

18 replies

•Created by Misery on 8/27/2024 in #support

Seemingly random hydration mismatches

The div/p thing is what causes these errors. When getting the plain html, the browser assumes that div inside of a p is an error, closes the p and opens a new div. Once solid hydrates it sees this, complains, and tries to fix it. So when you look in devtools it will be correct. If you disable JS or only look at the returned static html, you will see another structure.

6 replies

•Created by Max on 3/27/2023 in #support

function prop destructure

No it's not... What if someone uses the component in a way that changes the accessor?

function Inner(props: { n: () => number }) {
  // Only takes the first version of the accessor
  const n = props.n;

  return <button>{n()}</button>;
}

function GoodOuter() {
  const [n, setN] = createSignal(0);

  // Works because it is always the same accessor
  return <Inner n={n} />;
}

function BadOuter() {
  const [a, setA] = createSignal(0);
  const [b, setB] = createSignal(100);

  const [useA, setUseA] = createSignal(true);

  return (
    <div>
      <button onClick={() => setUseA(!useA())}>Toggle</button>
      <Inner n={useA() ? a : b} />
    </div>
  )
}

function Inner(props: { n: () => number }) {
  // Only takes the first version of the accessor
  const n = props.n;

  return <button>{n()}</button>;
}

function GoodOuter() {
  const [n, setN] = createSignal(0);

  // Works because it is always the same accessor
  return <Inner n={n} />;
}

function BadOuter() {
  const [a, setA] = createSignal(0);
  const [b, setB] = createSignal(100);

  const [useA, setUseA] = createSignal(true);

  return (
    <div>
      <button onClick={() => setUseA(!useA())}>Toggle</button>
      <Inner n={useA() ? a : b} />
    </div>
  )
}

We should never break reactivity just because it works in some cases... If you can break the component by "using it wrong", the component implementation is broken

21 replies

•Created by <Alterion.Dev> on 12/13/2022 in #support

Virtual Scrolling with animation and dynamic loading

I suggest not using overflow: hidden, but overflow scroll with scroll snap. You can then do some css shenanigangs to hide the scrollbar visually, but the setup will automatically work with horizontal mouse wheels, trackpads or touch screens.

5 replies