develop

Hooks

The React hooks you know, with the same rules: call them at the top level of a component, in the same order every render.

State and effects

python

from pyxpo import AppState, Text, useEffect, useState

def StateLabel():
    state, setState = useState(AppState.currentState)

    def subscribe():
        sub = AppState.addEventListener("change", setState)
        return sub.remove   # cleanup when the screen goes away

    useEffect(subscribe, [])
    return Text("App is ", state)

Setters accept a value or a function of the old value. An effect returns an optional cleanup function. The deps list works as in React: [] runs once, no list runs after every render.

Async work

use_async runs a coroutine function, or a blocking function in a worker thread, when its deps change. It returns (loading, value, error).

python

import json, urllib.request
from pyxpo import ActivityIndicator, Text, use_async

def load_user():
    with urllib.request.urlopen("https://api.example.com/me") as r:
        return json.load(r)

def Profile():
    loading, user, error = use_async(load_user, [])
    if loading:
        return ActivityIndicator()
    if error:
        return Text("Could not load profile")
    return Text("Hi, ", user["name"])

Context

python

from pyxpo import Text, create_context, use_context

Theme = create_context("light")

def Label():
    theme = use_context(Theme)
    return Text("Theme: ", theme)

def App():
    return Theme.Provider(Label(), value="dark")

All hooks

Every hook has a camelCase name and a snake_case name. They are the same function.

React name	Python name	Use it for
`useState`	`use_state`	State that survives renders.
`useReducer`	`use_reducer`	State updated by a reducer function.
`useEffect`	`use_effect`	Side effects after render, with cleanup.
`useLayoutEffect`	`use_layout_effect`	Effects that run before the native side paints.
`useRef`	`use_ref`	A mutable box, or a handle to a native view.
`useMemo`	`use_memo`	Cache a computed value until deps change.
`useCallback`	`use_callback`	Keep the same function between renders.
`useContext`	`use_context`	Read a value from a Provider above.
`useId`	`use_id`	A stable unique id.
`useImperativeHandle`	`use_imperative_handle`	Expose methods through a ref.
`useSyncExternalStore`	`use_sync_external_store`	Subscribe to an outside store.
`useTransition`	`use_transition`	Mark an update as not urgent.
`useDeferredValue`	`use_deferred_value`	Render a slow value a little later.
-	`use_async`	Run async or blocking work and track its result.

Theme and layout hooks

React name	Python name	Use it for
`useAppTheme`	`use_app_theme`	The StyleSheet.configure theme, for values outside styles.
`useBreakpoint`	`use_breakpoint`	The active breakpoint, such as "md".
`useBreakpointValue`	`use_breakpoint_value`	The value of a breakpoint map for this window.
`useMediaQuery`	`use_media_query`	True when the window matches a CSS-like query.
`useWindowDimensions`	`use_window_dimensions`	Window width, height, scale and font scale.
`useSafeAreaInsets`	`use_safe_area_insets`	Safe area insets in dp.

See Styling and themes and Responsive layout.

Router hooks such as useLocalSearchParams and useFocusEffect are covered on the Router page.