Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[LiveComponent] "Hooks: Handle Component Behavior" spacing issue in docs #2435

Merged
merged 1 commit into from
Dec 11, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 49 additions & 45 deletions src/LiveComponent/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -181,51 +181,6 @@ let's keep going because… things get cooler.
Need to do some extra data initialization on your component? Create
a ``mount()`` method or use the ``PostMount`` hook: `Twig Component mount documentation`_.

Hooks: Handle Component Behavior
--------------------------------
Most of the time, you'll just pass data to your components and
let it handle the rest. However, if you need to do something
more complex during certain stages of a component's lifecycle, you
can take advantage of lifecycle hooks.

``PostHydrate`` Hook
~~~~~~~~~~~~~~~~~~~~
The ``#[PostHydrate]`` hook is called immediately after the component's state
is loaded from the client. This is useful if you need to process or adjust
the data once it’s been hydrated.

``PreDehydrate`` Hook
~~~~~~~~~~~~~~~~~~~~~
The ``#[PreDehydrate]`` hook is triggered just before your component’s state
is sent back to the client. You can use this to modify or clean up the data
before it’s serialized and returned to the client.

``PreReRender`` Hook
~~~~~~~~~~~~~~~~~~~~
The ``#[PreReRender]`` hook is called before your component is re-rendered
during an HTTP request. It does not run during the initial render but is
helpful when you need to adjust the state before sending it back to
the client for re-rendering.

Hook Priority
~~~~~~~~~~~~~
You can control the order in which hooks are executed by using the ``priority``
argument. If multiple hooks of the same type are registered in a component, those
with a higher priority value will run first. This allows you to manage the order
in which your actions are performed within the same lifecycle stage::

#[PostHydrate(priority: 10)]
public function highPriorityHook(): void
{
// Runs first
}

#[PostHydrate(priority: 1)]
public function lowPriorityHook(): void
{
// Runs last
}

LiveProps: Stateful Component Properties
----------------------------------------

Expand Down Expand Up @@ -3423,6 +3378,55 @@ Local variables do remain available:
{% endblock %}
{% endcomponent %}

Hooks: Handle Component Behavior
--------------------------------

Most of the time, you'll just pass data to your components and let it handle
the rest. However, if you need to do something more complex during certain
stages of a component's lifecycle, you can take advantage of lifecycle hooks.

``PostHydrate`` Hook
~~~~~~~~~~~~~~~~~~~~

The ``#[PostHydrate]`` hook is called immediately after the component's state
is loaded from the client. This is useful if you need to process or adjust
the data once it’s been hydrated.

``PreDehydrate`` Hook
~~~~~~~~~~~~~~~~~~~~~

The ``#[PreDehydrate]`` hook is triggered just before your component’s state
is sent back to the client. You can use this to modify or clean up the data
before it’s serialized and returned to the client.

``PreReRender`` Hook
~~~~~~~~~~~~~~~~~~~~

The ``#[PreReRender]`` hook is called before your component is re-rendered
during an HTTP request. It does not run during the initial render but is
helpful when you need to adjust the state before sending it back to the client
for re-rendering.

Hook Priority
~~~~~~~~~~~~~

You can control the order in which hooks are executed by using the ``priority``
argument. If multiple hooks of the same type are registered in a component,
those with a higher priority value will run first. This allows you to manage
the order in which your actions are performed within the same lifecycle stage::

#[PostHydrate(priority: 10)]
public function highPriorityHook(): void
{
// Runs first
}

#[PostHydrate(priority: 1)]
public function lowPriorityHook(): void
{
// Runs last
}

Advanced Functionality
----------------------

Expand Down
Loading