Using Deact Hooks

Hooks are re-usable functions in Deact elements inspired by React hooks. Similarly to React hooks, they should always be invoked in the same order within a component.

Key Difference from React

All hooks require ref as the last parameter.

// React
const [value, setValue] = useState(0);

// Deact
const [value, setValue] = useState(0, ref);

Available Primative Hooks (refer to deact.js)

React-like hooks

• •useState
• •useRef
• •useMemo
• •useCallback

Awaited hooks: used to await asynchronous code like data fetching.

const userData = await useAwaitedMemo(() => fetchUser(userId), [userId], ref);

• •useAwaitedMemo
• •useAwaitedEffect

useCallbackBinding

Bind a callback to Discord component interactions (buttons, select menus). Refer to the deact-component-callback skill on how to use.

useModalSubmitCallbackBinding

Handle modal form submissions.

const onSubmitKey = useModalSubmitCallbackBinding(
  (interaction, data) => {
    const inputValue = interaction.fields.getTextInputValue("inputId");
    setFormValue(inputValue);
  },
  ref,
  { defer: true },
);

Common Patterns

Pagination State

const [page, setPage] = useState(1, ref);

const prevKey = useCallbackBinding(() => setPage((p) => p - 1), ref);
const nextKey = useCallbackBinding(() => setPage((p) => p + 1), ref);

Toggle State

const [isOpen, setIsOpen] = useState(false, ref);

const toggleKey = useCallbackBinding(() => setIsOpen((v) => !v), ref);

Filtered Data

const [filter, setFilter] = useState({}, ref);

const filteredItems = useMemo(
  () => items.filter((item) => matchesFilter(item, filter)),
  [items, filter],
  ref,
);

Data with Loading

const result = await useAwaitedMemo(() => fetchData(id), [id], ref);

if (result.err) {
  return { err: result.err };
}

const data = result.data;

Custom Hooks

Custom hooks are created in src/hooks and can be used for more specific purposes. Refer to the create-deact-hook skill on creating a custom hook.

Dependency Arrays

Like React, dependencies determine when hooks re-run:

// Always recalculates (no deps = every render)
useMemo(() => compute(), [], ref);

// Recalculates when a or b changes
useMemo(() => compute(a, b), [a, b], ref);

Include all values used inside the callback that could change.

Key Rules

1. •Always pass ref as last argument
2. •Don't call hooks conditionally (same as React)
3. •Hooks must be called in same order every render
4. •await async hooks (useAwaitedMemo, useAwaitedEffect)
5. •Use defer: false for callbacks that show modals