State Management

State Management and Hooks with PynamicUI

State management and hooks are essential concepts in building dynamic and interactive user interfaces. PynamicUI offers powerful mechanisms to handle and synchronize state changes in your Python desktop applications, making it easy to build responsive UI components. This page will cover:

1. Understanding State Management in PynamicUI
2. Working with States
3. Implementing Hooks for Custom Logic
4. Effects and Side Effects

1. Understanding State Management in PynamicUI

In PynamicUI, state management involves managing and updating the state of your UI elements. A state represents the data associated with a component, such as a counter value or the visibility of an element. When the state changes, the UI automatically updates to reflect the new state, ensuring a seamless user experience.

2. Working with States

PynamicUI provides a straightforward way to manage states using the useState method. This method enables you to associate an attribute (state) with an initial value and a callback function. When the state changes, the callback function is triggered, and the UI updates accordingly.

from pynamicui import createDom

dom = createDom()

# Define a state for a counter with an initial value of 0
dom.useState("counter", 0, self.updateCounter)

In this example, the updateCounter method will be called whenever the "counter" state changes. You can use the getState and setState methods to retrieve and update the state values, respectively.

def updateCounter(self, attr, dom, value):
    print("Counter state changed:", value)

# Access the current value of the "counter" state
current_value = dom.getState("counter")

# Update the "counter" state
dom.setState("counter", current_value + 1)

3. Implementing Hooks for Custom Logic

Hooks in PynamicUI provide a way to add custom logic and side effects to your UI components. Hooks are registered using the useEffect method, which takes a list of properties to watch, a hook callback, and an optional unmount callback.

def onCounterUpdate(prop, element, value):
    print("Counter label updated:", value)

# Register a hook to watch the "counter" state and invoke the "onCounterUpdate" function
self.counterLabel.useEffect(props=["", "text"], hook=onCounterUpdate)

The above example demonstrates a hook that listens for changes to the "text" property of the counterLabel element. Whenever the property changes, the onCounterUpdate function is called.

4. Effects and Side Effects

Hooks in PynamicUI offer a clean way to manage effects and side effects. Effects represent actions that occur when an element is mounted, updated, or unmounted. They are declared using an empty string ("") as the property to watch.

def onElementMount(prop, element, value):
    print("Element mounted:", element.name)

def onElementUnmount(prop, element, value):
    print("Element unmounted:", element.name)

# Register effects for mounting and unmounting elements
self.counterLabel.useEffect(props=[""], hook=onElementMount, unmount=onElementUnmount)

In this example, the onElementMount and onElementUnmount functions are called when the counterLabel element is mounted and unmounted, respectively.

Conclusion

State management and hooks are powerful concepts in PynamicUI that enable you to create dynamic and interactive Python desktop applications. With state management, you can effortlessly handle data changes and ensure that the UI reflects the most up-to-date information. Hooks provide a means to incorporate custom logic, effects, and side effects, allowing for more control and versatility in your UI components. By effectively utilizing state management and hooks, you can build responsive and engaging user interfaces that provide a seamless and enjoyable experience for your users.