Common Component Patterns Cheat Sheet

Declaration

import { component$ } from '@builder.io/qwik';

export const Greeter = component$(() => {
  return <span>Hello World!</span>;
});

Props

import { component$ } from '@builder.io/qwik';

interface GreeterProps {
  salutation?: string;
  name?: string;
}

export const Greeter = component$(({ salutation = 'Hello', name = 'World' }: GreeterProps) => {
  return (
    <span>
      {salutation} {name}!
    </span>
  );
});

Event Props

Component props must be serializable, and therefore can not directly refer to functions.

import { component$, PropFunction } from '@builder.io/qwik';

export const Parent = component$(() => {
  return <MyButton doSomething$={() => console.log('Hello')}>click</MyButton>;
});

interface MyButtonProps {
  doSomething$: PropFunction<() => void>;
}

export const MyButton = component$(({ doSomething$ }: MyButtonProps) => {
  return <button onClick$={doSomething$}>click</button>;
});

Events

Watching for Changes

Server

Fetching Data

import { component$, useStore, useServerMount$ } from '@builder.io/qwik';

export const Greeter = component$(() => {
  const store = useStore<{ list: null | string[] }>({ list: null });
  useServerMount$(async () => {
    store.list = await doSomethingToFetchDataOnServer();
  });

  return <ul>{store.list && store.list.map((item) => <li>{item}</li>)}</ul>;
});

Client

Eagerly Executing Code

import { component$, useStore, useClientEffect$ } from '@builder.io/qwik';

export const Greeter = component$(() => {
  const store = useStore<{ list: null | string[] }>({ list: null });
  useClientEffect$(async () => {
    store.list = await doSomethingToFetchDataOnServer();
  });

  return <ul>{store.list && store.list.map((item) => <li>{item}</li>)}</ul>;
});