pret.hooks
use_state
[source]
Returns a stateful value, and a function to update it.
Examples
from pret.ui.react import div, button, p
from pret import component, use_state
@component
def CounterApp():
count, set_count = use_state(0)
def increment():
set_count(count + 1)
return div(p(count), button({"onClick": increment}, "Increment"))
Parameters
PARAMETER | DESCRIPTION |
---|---|
initial_value | The initial value of the state TYPE: |
RETURNS | DESCRIPTION |
---|---|
Tuple[StateValueType, Callable[[StateValueType], None]] |
|
use_memo
[source]
Returns a memoized value, computed from the provided function. The function will only be re-executed if any of the dependencies change.
Note
Ensure that dependencies are simple values like int, str, bool to avoid unnecessary re-executions, as these values are converted to javascript objects, and converting complex objects may not ensure referential equality.
Parameters
PARAMETER | DESCRIPTION |
---|---|
fn | The function to run to compute the memoized value TYPE: |
dependencies | The dependencies that will trigger a re-execution of the function TYPE: |
RETURNS | DESCRIPTION |
---|---|
FunctionReturnType | The value |
use_ref
[source]
Returns a mutable ref object whose .current
property is initialized to the passed argument.
The returned object will persist for the full lifetime of the component.
Parameters
PARAMETER | DESCRIPTION |
---|---|
initial_value | The initial value of the ref TYPE: |
RETURNS | DESCRIPTION |
---|---|
RefType[RefValueType] | The ref object |
use_callback
[source]
Returns a memoized callback function. The callback will be stable across re-renders, as long as the dependencies don't change, meaning the last callback function passed to this function will be used between two re-renders.
Note
Ensure that dependencies are simple values like int, str, bool to avoid unnecessary re-executions, as these values are converted to javascript objects, and converting complex objects may not ensure referential equality.
Parameters
PARAMETER | DESCRIPTION |
---|---|
callback | The callback function TYPE: |
dependencies | The dependencies that will trigger a re-execution of the callback. TYPE: |
use_effect
[source]
The useEffect
hook allows you to perform side effects in function components. Side effects can include data fetching, subscriptions, manually changing the DOM, and more.
The effect runs after every render by default. If dependencies
are provided, the effect runs whenever those values change. Therefore, if dependencies
is an empty array, the effect runs only once after the initial render.
Note
Ensure that dependencies are simple values like int, str, bool to avoid unnecessary re-executions, as these values are converted to javascript objects, and converting complex objects may not ensure referential equality.
Parameters
PARAMETER | DESCRIPTION |
---|---|
effect | A function containing the side effect logic. It can optionally return a cleanup function. TYPE: |
dependencies | An optional array of dependencies that determines when the effect runs. TYPE: |
use_tracked
[source]
This hook is used to track the access made on a proxy object. You can also use the returned object to change the proxy object.
Parameters
PARAMETER | DESCRIPTION |
---|---|
proxy_object | A proxy object, like the one returned by
|
RETURNS | DESCRIPTION |
---|---|
TrackedProxyType | A tracked proxy object |
use_event_callback
[source]
This hook is used to store a callback function that will be called when an event is triggered. The callback function can be changed without triggering a re-render of the component. The function returns a wrapped callback function that will in turn call the stored callback function.
Warning
Do not use this hook if the rendering of the component depends on the callback function.
Parameters
PARAMETER | DESCRIPTION |
---|---|
callback | The callback function TYPE: |
RETURNS | DESCRIPTION |
---|---|
CallbackType | The wrapped callback function |