SolidJS•3mo ago

Is there a more proper way to set value across components?

I've tried an experiment of setting value across components. The codes in the shot screen works, but it should be a better way to do this right?

5 Replies

Alex Lohr•3mo ago

No, using the setter in multiple locations is the way to go. If you want, you can encapsulate the functionality in a context, but you can also keep it global.

qdwang•3mo ago

Thank you

peerreynders•3mo ago

I would be extremely reluctant to hand out a raw setter like that. The “owner ” of reactive state should constrain the possible ways in which that state can be modified. The definition of those mutators should be collocated with the state itself and exported (if absolutely necessary) instead of the setter.

// file: value.tsx
import { createSignal } from 'solid-js';

const [value, setValue] = createSignal(0);

const increment = (v: number) => v + 1;
const addThree = (v: number) => v + 3;
const update = {
  increment: () => setValue(increment),
  addThree: () => setValue(addThree),
};

export { update, value };

// file: value.tsx
import { createSignal } from 'solid-js';

const [value, setValue] = createSignal(0);

const increment = (v: number) => v + 1;
const addThree = (v: number) => v + 3;
const update = {
  increment: () => setValue(increment),
  addThree: () => setValue(addThree),
};

export { update, value };

https://playground.solidjs.com/anonymous/e26301b5-e5dc-4d69-9304-10022a0b11e1 3. Read/Write segregation.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

peerreynders•3mo ago

Under most circumstances I would consider this a “code smell”:

import { value, update } from './value';

import { value, update } from './value';

i.e. needing access to both the accessor and mutators at the same time. Compare to: https://playground.solidjs.com/anonymous/40c07288-1536-4f99-9f6f-283506f87667

// file: main.tsx
import { render } from 'solid-js/web';
import { value } from './value';
import { Increment } from './increment';
import { AddThree } from './add-three';

function App() {
  return (
    <>
      <p>{value()}</p>
      <Increment />
      <AddThree />
    </>
  );
}

render(() => <App />, document.getElementById('app')!);

// file: main.tsx
import { render } from 'solid-js/web';
import { value } from './value';
import { Increment } from './increment';
import { AddThree } from './add-three';

function App() {
  return (
    <>
      <p>{value()}</p>
      <Increment />
      <AddThree />
    </>
  );
}

render(() => <App />, document.getElementById('app')!);

// file: increment.tsx
import { update } from './value';

const { increment } = update;

function Increment() {
  return (
    <button type="button" onClick={increment}>
      +1
    </button>
  );
}

export { Increment };

// file: increment.tsx
import { update } from './value';

const { increment } = update;

function Increment() {
  return (
    <button type="button" onClick={increment}>
      +1
    </button>
  );
}

export { Increment };

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

martinfowler.com

bliki: Code Smell

a bliki entry for Code Smell

qdwang•2mo ago

@peerreynders thank you for the advice

Gaming

Programming

Is there a more proper way to set value across components?