const [count, setCount] = createSignal(initialValue);

// side effect
createEffect(() => {
    count()
});

// memoization
const value = createMemo(() => computeExpensiveValue(count()));
const [count, setCount] = createSignal(initialValue);

// side effect
createEffect(() => {
    count()
});

// memoization
const value = createMemo(() => computeExpensiveValue(count()));

import {
  onMount,
  onCleanup
} from "solid-js";

const CountingComponent = () => {
  onMount(fn);
  onCleanup(fn);

  return <p>Hello iO</p>;
};
import {
  onMount,
  onCleanup
} from "solid-js";

const CountingComponent = () => {
  onMount(fn);
  onCleanup(fn);

  return <p>Hello iO</p>;
};

// Repeat
<For each={state.list} fallback={<div>Loading...</div>}>
  {(item) => <div>{item}</div>}
</For>

// Show/Hide
<Show when={state.count > 0} fallback={<div>Loading...</div>}>
  <div>My Content</div>
</Show>

// Switch/Match
<Switch fallback={<div>Not Found</div>}>
  <Match when={state.route === "home"}>
    <Home />
  </Match>
  ...
</Switch>
// Repeat
<For each={state.list} fallback={<div>Loading...</div>}>
  {(item) => <div>{item}</div>}
</For>

// Show/Hide
<Show when={state.count > 0} fallback={<div>Loading...</div>}>
  <div>My Content</div>
</Show>

// Switch/Match
<Switch fallback={<div>Not Found</div>}>
  <Match when={state.route === "home"}>
    <Home />
  </Match>
  ...
</Switch>

<div class="modal" use:clickOutside={() => setShow(false)}>
  Some Modal
</div>

export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}
<div class="modal" use:clickOutside={() => setShow(false)}>
  Some Modal
</div>

export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}

import server$ from 'solid-start/server'
 
function Component() {
  const logHello = server$(async (message: string) => {
    console.log(message)
  });
 
  logHello('Hello')

  ...
}
import server$ from 'solid-start/server'
 
function Component() {
  const logHello = server$(async (message: string) => {
    console.log(message)
  });
 
  logHello('Hello')

  ...
}