#Best practice of signals among components?

4 messages · Page 1 of 1 (latest)

tough basalt
#

file a

import createSignal from "solid-js"
const [demo, setDemo] = createSignal()

file b

import demo from "file a";

demo();

file b won't throw errors if we load file a in background but when i only just loaded a view of file b how do i handle it so this will just work as expected?

night nacelle
#

I am not sure how importing works but I know that the best ways I have found to share signals around is passing through props or context. This is easiest with parent child components where the parent holds the signal and passes it into the child. If you need two sibling components to both have access to a signal you can hold the signal in the parent or and pass to both in props or you can have the signal provided through a context so that you don't have to worry about manually passing a bunch of props around

night nacelle
#
// child component
export const Counter: Component<{value: number, setValue: Setter<number> }> = (props) => (
  <div>
    <button onClick={() => props.setValue((prev) => prev - 1)}>-</button>
    <span>{props.value()}</span>
    <button onClick={() => props.setValue((prev) => prev + 1)}>+</button>
  </div>
)

// parent component
export const App = () => {
  const [value, setValue] = createsSignal();

  return <Counter value={value()} onValueChange={setValue} />
};