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()}

a={a()}

to Child, and access

props.a

props.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>
  );

SolidJS•4y ago•

3 replies

nirtamir2

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()}

a={a()}

to Child, and access

props.a

props.a

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>
  );

Best practice working with reactive values inside context provider

Similar Threads

Best practice working with reactive values inside context provider

Similar Threads

Similar Threads

Similar Threads