Component States
A state is data that describes the current state of a component. Updating a state will trigger the change detection of the component and update the bindings. In MonsterJS, there are two types of state: component state (managed using the useState hook), and shared state (created by createSharedState function).
Component State
The component state is a state that only affects the component where it is defined. It uses the useState
function to create a getter and setter of the state. It has two arguments, first is the this
context of the component, and second is the initial value of the state.
Example.
import { useState } from '@monster-js/core';
export function App() {
const [counter, setCounter] = useState(this, 100);
return <h1>{counter()}</h1>
}
In the example above, which uses the useState function, the counter
variable is the getter of the current value of the state, and setCounter
is the corresponding function for updating the state.
Setting a State Value
Updating the value of a state variable will trigger change detection of the component and any other components that depend on that state value.
Example.
import { useState } from '@monster-js/core';
export function App() {
const [ counter, setCounter ] = useState(this, 100);
setInterval(() => setCounter(counter() + 1), 1000);
return <h1>{counter()}</h1>
}
The example above demonstrates updating the counter
state every second using the setCounter
function and triggers change detection of the component to update the view. This update will only affect the current component, as the counter state is local to the component where it is defined using useState
.
Shared State
Shared state is a state that can be accessed and updated by multiple components.
In MonsterJS, shared state can be created using createSharedState
function.
When a value in the shared state is updated, all components that depend on that value will be notified to reflect the updated value.
Create a Shared State
We can create a shared state using the createSharedState
function.
This function accept one arguments which is the initial value of the state.
This function returns another function that we can use inside our components.
Example.
import { createSharedState } from '@monster-js/core';
export const counterState = createSharedState('counter', 100);
Now, we can import the counterState
function inside our component. This function accepts two arguments,
first is the component's this
context, and second is an optional parameter which is a callback function that is called when the state is changed.
This function returns a getter and setter of the shared state.
Example.
import { counterState } from './counter.state';
export function App() {
const [counter, setCounter] = counterState(this);
return <h1>{counter()}</h1>
}
Setting a Shared State Value
Setting the value of a state will trigger change detection for all components using that state.
Example.
import { counterState } from './counter.state';
export function App() {
const [counter, setCounter] = counterState(this);
setInterval(() => setCounter(counter() + 1), 1000);
return <h1>{counter()}</h1>
}