Creating Deact Hooks

Name: create-deact-hook
Rating: 76
Author: ewei068

Quick Reference

File location: src/hooks/useYourHook.js

Naming convention: Always prefix with use (e.g., usePagination, useInfoToggle)

Hook Structure

javascript

const {
  useState,
  useCallbackBinding,
  createElement,
} = require("../deact/deact");

/**
 * @param {object} param0
 * @param {number=} param0.initialValue
 * @param {DeactElement} ref
 * @returns {{ value: number, setValue: Function, buttonElement: CreateElementResult }}
 */
const useMyHook = ({ initialValue = 0 }, ref) => {
  // State and logic here

  return {
    // Return values, setters, and pre-built elements
  };
};

module.exports = useMyHook;

Key Differences from React Hooks

•ref is always the last parameter (not a hook call)
•Hooks can be async - use await for data fetching
•Can return createElement results - pre-built UI components

Simple Hook Example

javascript

const {
  useState,
  useCallback,
  useCallbackBinding,
  createElement,
} = require("../deact/deact");
const { ButtonStyle } = require("discord.js");
const Button = require("../deact/elements/Button");

const useInfoToggle = ({ initial = false, deferToggle = false }, ref) => {
  const [isToggled, setIsToggled] = useState(initial, ref);

  const toggle = useCallback(
    () => {
      setIsToggled((prev) => !prev);
    },
    [],
    ref,
  );

  const toggleBindingKey = useCallbackBinding(toggle, ref, {
    defer: deferToggle,
  });

  const toggleButton = createElement(Button, {
    label: "ⓘ",
    callbackBindingKey: toggleBindingKey,
    style: isToggled ? ButtonStyle.Primary : ButtonStyle.Secondary,
  });

  return {
    isToggled,
    toggle,
    toggleButton,
  };
};

module.exports = useInfoToggle;

Key Rules

•ref is always the last parameter
•Prefix hook names with use
•Async hooks must be awaited when called
•May return pre-built elements for convenience
•Document return type with JSDoc

Related Skills

•use-deact-hook - How to use hooks in elements (useState, useMemo, useCallbackBinding, etc.)
•deact-component-callback - Handling component interactions in callbacks

References

•references/pattern-pagination-hook.md - Pagination with scroll buttons
•references/pattern-async-data-hook.md - Async hook with data fetching
•references/pattern-callback-options.md - Passing through callback options