Signals

Manage state with createSignal.

createSignal is a powerful way to manage state in Olova. It allows you to create reactive state variables that automatically update the UI when their values change.

Here's a cool example of a counter application using createSignal in Olova:

import { createSignal } from "olova";

function Counter() {
  // Create a signal with an initial value of 0
  const [count, setCount] = createSignal(0);

  // Function to increment the count
  const increment = () => setCount(count() + 1);

  // Function to decrement the count
  const decrement = () => setCount(count() - 1);

  return (
    <>
      <div style={{ textAlign: "center", marginTop: "20px" }}>
        <h1>Counter: {count()}</h1>
        <button onClick={increment} style={{ marginRight: "10px" }}>
          Increment
        </button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </>
  );
}

export default Counter;

Explanation

• Importing createSignal: We import createSignal from olova to create reactive state variables.
• Creating a Signal: We use createSignal(0) to initialize a counter with a value of 0. This returns a tuple with the current value and a setter function.
• Increment/Decrement Functions: These functions update the counter state by calling the setter function with the new value.
• Rendering the UI: The component renders a heading displaying the current count and two buttons to increment and decrement the count. The UI automatically updates when the count changes.

This example demonstrates how createSignal can be used to create a simple, interactive counter application in Olova. The use of signals ensures that the UI remains in sync with the state changes.