nirtamir2 Posts - Answer Overflow

nirtamir2

Posts Comments

SSolidJS

•Created by nirtamir2 on 11/6/2024 in #support

BUG?: clientOnly inside Suspense boundary is not shown

4 replies

SSolidJS

•Created by nirtamir2 on 4/12/2023 in #support

Solid.js event handler that depend on reactive value best practice (fix solid/reactivity lint rule)

Hi, I want to know what is the best practice for using event handers in solid.js that depend on reactive variables from different scopes. I want to create an abstraction over my component library, and I'm unsure what the recommended way is. I created a counter and 3 buttons that print the counter value onClick. I want to increase the count and the button to print the latest count. So button 2 does not work well. But for all the buttons I get lint error. I added a playground link: https://playground.solidjs.com/anonymous/f6da6ee2-fe3e-4d99-b840-7e3dbb9eb4e4 How to handle this case?

10 replies

SSolidJS

•Created by nirtamir2 on 2/4/2023 in #support

Subscribe to any unknown store change

Hi. Is there a way to subscribe to a store change in unknown property? I have a store:

type StoreValue = Record<string, number>;

 const [store, setStore] = createStore<StoreValue>({
    a: 0,
    b: 0,
  });

type StoreValue = Record<string, number>;

 const [store, setStore] = createStore<StoreValue>({
    a: 0,
    b: 0,
  });

And sometimes I modify it

      <button type="button" onClick={() => setStore("a", undefined)}>
        setStore("a", undefined)
      </button>

      <button type="button" onClick={() => setStore("a", undefined)}>
        setStore("a", undefined)
      </button>

And I want to render it's unwrapped value on each change (and I don't know the change upfront)

<div>
        ⚠️ store - not updating because store is not reactive - only its values:{" "}
        {JSON.stringify(unwrap(store))}
      </div>

<div>
        ⚠️ store - not updating because store is not reactive - only its values:{" "}
        {JSON.stringify(unwrap(store))}
      </div>

How to make the store value reactive to unknown changes?

39 replies

SSolidJS

•Created by nirtamir2 on 1/29/2023 in #support

Best practice working with reactive values inside context provider

I did some experiments using solidjs context. Context as value is not reactive in solid.js. It's a little different from props that are reactive - if you pass signals as props like a={a()} to Child, and access props.a - a is reactive. If I wrap the context value in a function and treat context as Accessor<OriginalContextValue> - it's reactive. If I use a store it's reactive too (but the update needs to be done differently). So is it considered good practice to use it with thunk (wrapping in a function)?

function App() {
  const [a, setA] = createSignal<number>(1);
  const [b, setB] = createSignal<number>(1);

// ✅ reactive
  const contextThunk = () => {
    return { a: a(), b: b() };
  };

  // ✅ reactive
  const contextMemo = createMemo(() => {
    return { a: a(), b: b() };
  });

  return (
    <div>
      <button type="button" onClick={() => setA(a() + 1)}>
        a++
      </button>
      <button type="button" onClick={() => setB(b() + 1)}>
        b++
      </button>
        // This is reactive because its contextMemo (as a function) instead of contextMemo() (as a value)
      <AppFunctionContext.Provider value={contextMemo}> // inside `const context = useContext(AppFunctionContext)` and `const a = context().a`
        <ChildWithFunctionContext />
      </AppFunctionContext.Provider>
    </div>
  );

function App() {
  const [a, setA] = createSignal<number>(1);
  const [b, setB] = createSignal<number>(1);

// ✅ reactive
  const contextThunk = () => {
    return { a: a(), b: b() };
  };

  // ✅ reactive
  const contextMemo = createMemo(() => {
    return { a: a(), b: b() };
  });

  return (
    <div>
      <button type="button" onClick={() => setA(a() + 1)}>
        a++
      </button>
      <button type="button" onClick={() => setB(b() + 1)}>
        b++
      </button>
        // This is reactive because its contextMemo (as a function) instead of contextMemo() (as a value)
      <AppFunctionContext.Provider value={contextMemo}> // inside `const context = useContext(AppFunctionContext)` and `const a = context().a`
        <ChildWithFunctionContext />
      </AppFunctionContext.Provider>
    </div>
  );

4 replies

Gaming

Programming