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

Add phoenix.component case to heex guide #2887

Merged
merged 2 commits into from
Oct 27, 2023
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
25 changes: 19 additions & 6 deletions guides/server/assigns-eex.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ nothing is sent.
Change tracking also works when accessing map/struct fields.
Take this template:


```heex
<div id={"user_#{@user.id}"}>
<%= @user.name %>
Expand All @@ -57,7 +56,6 @@ at all.
The change tracking also works when rendering other templates as
long as they are also `.heex` templates:


```heex
<%= render "child_template.html", assigns %>
```
Expand Down Expand Up @@ -122,7 +120,7 @@ The next pitfall is related to variables. Due to the scope of variables,
LiveView has to disable change tracking whenever variables are used in the
template, with the exception of variables introduced by Elixir basic `case`,
`for`, and other block constructs. Therefore, you **must avoid** code like
this in your LiveView templates:
this in your `HEEx` templates:

```heex
<% some_var = @x + @y %>
Expand All @@ -135,7 +133,8 @@ Instead, use a function:
<%= sum(@x, @y) %>
```

Similarly, **do not** define variables at the top of your `render` function:
Similarly, **do not** define variables at the top of your `render` function
for LiveViews or LiveComponents:

def render(assigns) do
sum = assigns.x + assigns.y
Expand All @@ -145,11 +144,25 @@ Similarly, **do not** define variables at the top of your `render` function:
"""
end

Instead explicitly precompute the assign in your LiveView, outside of render:
Instead explicitly precompute the assign outside of render:

assign(socket, sum: socket.assigns.x + socket.assigns.y)

Generally speaking, avoid accessing variables inside LiveViews, as code that
Unlike LiveView, a `Phoenix.Component` function can modify the assigns it receives
via the `assign/2`, `assign/3`, `assign_new/3`, and `update/3` functions.
Therefore, you can assign the computed values before declaring your template:

attr :x, :integer, required: true
attr :y, :integer, required: true
def sum_component(assigns) do
assigns = assign(assigns, sum: assigns.x + assigns.y)

~H"""
<%= @sum %>
"""
end

Generally speaking, avoid accessing variables inside `HEEx` templates, as code that
access variables is always executed on every render. This also applies to the
`assigns` variable. The exception are variables introduced by Elixir's block
constructs. For example, accessing the `post` variable defined by the comprehension
Expand Down
Loading