20CAKE20.JS
04-state

State

14

04-state/09-watch-options.tsx

Watch Options

Example

Official Cake20 View example for watch options.

export const data = {
  count: 0,
  profile: {
    name: "CAKE20",
  },
};

export const watch = {
  count: {
    immediate: true,
    flush: "post" as const,
    run(value: number, previous: number | undefined, clean: (callback: () => void) => void) {
      const timer = window.setTimeout(() => {
        console.log("count", previous, value);
      }, 200);

      clean(() => window.clearTimeout(timer));
    },
  },
  profile: {
    deep: true,
    run(value: { name: string }) {
      console.log("profile", value.name);
    },
  },
};

export default () => <Button onClick={() => data.count++}>{data.count}</Button>;