-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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.
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
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]);
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 containingrulesets
(an array of rules) anduser
(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
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
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
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