Hooks

Vader Component Hooks

Vader.js introduces a component-based architecture for building web applications, where each component can utilize various hooks to manage state, side effects, and more. In this wiki entry, we'll delve into the hooks available within the Vader.Component class, helping you understand how to use them effectively in your components.

Overview

The Vader.Component class provides a set of hooks that enable you to manage component-specific functionality, such as state management, side effects, and more. Understanding these hooks is crucial for creating dynamic and interactive components in Vader.js.

Available Hooks

1. useState

The useState hook is used for managing component state. It allows you to declare and manipulate state variables within your component.

const [state, setState] = this.useState(key, initialValue, callback);

• key: A unique identifier for the state variable.
• initialValue: The initial value of the state variable.
• callback (optional): A callback function to execute when the state changes.

Example:

const [count, setCount] = this.useState('count', 0);
setCount(count + 1); // Updates the 'count' state

2. useEffect (Deprecated)

The useEffect hook enables you to perform side effects within your component. Note: It is deprecated in favor of using Vader signals for better efficiency.

const cleanup = this.useEffect(effectFn, dependencies);

• effectFn: A function that contains the side effect logic.
• dependencies: An array of dependencies that trigger the effect when they change.

Example:

const cleanup = this.useEffect(() => {
  // Side effect logic
}, [dependency]);

3. useAuth

The useAuth hook helps you manage authentication-related logic within your component. It allows you to define rulesets and check user roles and permissions.

const auth = this.useAuth(options);

• options: An object containing rulesets (an array of rules) and user (user information).

Example:

const auth = this.useAuth({
  rulesets: [
    {
      action: 'create',
      condition: (user) => user.role === 'admin',
    },
  ],
  user: {
    role: 'admin',
  },
});

const canCreate = auth.can('create'); // Check if the user can create

4. useReducer

The useReducer hook lets you manage complex state logic within your component. It works similarly to React's useReducer.

const [state, dispatch] = this.useReducer(key, reducer, initialState);

• key: A unique identifier for the state managed by the reducer.
• reducer: A function that defines how state updates should be handled.
• initialState: The initial state of the reducer.

Example:

const [count, setCount] = this.useReducer('count', (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error('Unknown action');
  }
}, 0);

setCount({ type: 'increment' }); // Dispatch an action to increment the count

5. useSyncStore

The useSyncStore hook allows you to manage a synchronized store within your component. It simplifies persistent data storage and retrieval.

const store = this.useSyncStore(storeName, initialState);

• storeName: The name of the store.
• initialState: The initial state of the store.

Example:

const store = this.useSyncStore('myStore', { count: 0 });

store.setField('count', 1); // Set a field in the store
const count = store.getField('count'); // Get a field from the store

6. signal

The signal hook is used to create and manage signals within your component. Signals are efficient alternatives to useEffect for handling updates.

const signal = this.signal(key, initialState);

• key: A unique identifier for the signal.
• initialState: The initial state of the signal.

Example:

const signal = this.signal('count', 0);

signal.subscribe((value) => {
  // Handle signal updates
});

signal.call(); // Trigger all signal subscribers