Skip to content

Commit

Permalink
minor symfony#2435 [LiveComponent] "Hooks: Handle Component Behavior"…
Browse files Browse the repository at this point in the history
… spacing issue in docs (nehalgajjar)

This PR was merged into the 2.x branch.

Discussion
----------

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

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Issues        | Fix symfony#2363
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

## [Issue] Fix Line Break / Spacing
<img width="641" alt="image" src="https://github.com/user-attachments/assets/ee5336a2-fa1f-4f5d-a05d-5d561d5c5229">

Commits
-------

f40f510 Fix [LiveComponent] "Hooks: Handle Component Behavior" spacing issue in docs
  • Loading branch information
smnandre committed Dec 11, 2024
2 parents a59e390 + f40f510 commit 86d08cb
Showing 1 changed file with 49 additions and 45 deletions.
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 @@ -3425,6 +3380,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

0 comments on commit 86d08cb

Please sign in to comment.