---
title: "Phoenix LiveView widgets with hooks: a reusable pattern"
url: https://daily.dev/posts/phoenix-liveview-widgets-with-hooks-a-reusable-pattern-ldf39mbva
source_url: https://curiosum.com/blog/hooking-up-with-liveview-stateful-widgets-with-function-components
type: article
source: "Curiosum"
published: 2026-04-17T09:46:56.380Z
updated: 2026-04-17T09:47:25.237Z
tags: ["elixir", "react-hooks", "liveview"]
reading_time: 17
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Phoenix LiveView widgets with hooks: a reusable pattern

**[Curiosum](https://daily.dev/sources/curiosum)** · 17 min read · 0 upvotes · 0 comments

## Summary

A detailed pattern for building self-contained, stateful widgets in Phoenix LiveView using attach_hook/4, function components, and plain structs stored in socket.assigns. The approach solves limitations of LiveComponents (no handle_info, no handle_params) and embedded LiveViews (separate processes, string-only session). Each widget module encapsulates a state struct, an assign_component/n setup function, a pure render/1 function component, and optional hook callbacks for events, PubSub messages, and URL params. A full chat widget example demonstrates event namespacing, multi-instance support via assign keys, PubSub integration, URL-driven state, and a memory trade-off with LiveView streams. The parent LiveView needs only two lines to mount and render the widget.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://curiosum.com/blog/hooking-up-with-liveview-stateful-widgets-with-function-components>

## Similar posts on daily.dev

- [ElixirConf EU](https://daily.dev/posts/elixirconf-eu-3zacb8kop) · ElixirStatus · 0 upvotes · 0 comments
- [Watch: Exploring LiveView 1.2's server-composed JS commands, colocated CSS, and colocated hooks](https://daily.dev/posts/watch-exploring-liveview-1-2-s-server-composed-js-commands-colocated-css-and-colocated-hooks-h14hlfolz) · ElixirStatus · 0 upvotes · 0 comments
- [Asynchronous Tasks and Streaming UIs in Phoenix Liveview](https://daily.dev/posts/asynchronous-tasks-and-streaming-uis-in-phoenix-liveview-al560674c) · ElixirStatus · 1 upvotes · 0 comments

---

Tags: [#elixir](https://daily.dev/tags/elixir), [#react-hooks](https://daily.dev/tags/react-hooks), [#liveview](https://daily.dev/tags/liveview)

[View this post on daily.dev](https://daily.dev/posts/phoenix-liveview-widgets-with-hooks-a-reusable-pattern-ldf39mbva)