State Management
Learn how to declare reactive variables, handle multiple states, and manage complex objects in PulsePoint.
Simple State Declaration
Initialize a reactive primitive with pp.state(). The view automatically updates when the setter is called.
Naming Convention
When destructuring, the setter must follow standard camelCase conventions. If your variable is named
myVar, the setter should be named setMyVar.
counter.html
<p>Count: {count}</p>
<!-- Inline updates -->
<button onclick="setCount(count + 1)">Increment</button>
<script type="text/pp">
// Pattern: const [variable, setVariable] = pp.state(initialValue);
const [count, setCount] = pp.state(0);
</script>Multiple State Variables
You can declare as many state variables as needed. They function independently.
profile.html
<div>
<h3>{name}</h3>
<p>Age: {age}</p>
<p>Contact: {email}</p>
</div>
<script type="text/pp">
const [name, setName] = pp.state("Alex Chen");
const [age, setAge] = pp.state(29);
const [email, setEmail] = pp.state("alex@pulsepoint.dev");
</script>State with Objects
When managing related data, you can store objects in state. Access properties using dot notation in your templates.
Best Practice: When updating objects, always use the spread operator
... to preserve existing properties.
settings.html
<div>
<p>Theme: {config.theme}</p>
<p>Notifications: {config.notifications ? 'On' : 'Off'}</p>
<button onclick="toggleNotifs()">Toggle Notifications</button>
</div>
<script type="text/pp">
const [config, setConfig] = pp.state({
theme: "dark",
notifications: true,
version: "1.0.5"
});
function toggleNotifs() {
// Spread previous config, then overwrite notifications
setConfig({
...config,
notifications: !config.notifications
});
}
</script>