A lot of times when I write functional components and live components, I want to make sure I don’t end up with duplicate HTML IDs so I do something like <div id={"my-component-#{System.unique_integer()}"} or <div id={"my-component-#{Ecto.UUID.generate()}"} or <div id={"my-component-#{:rand.byte…

:wave: # produces something like "-576460752302382141" iex> :timer.tc fn -> Enum.each(1..1000, fn _ -> System.unique_integer() |> Integer.to_string end) end {746, :ok} # produces something like "FE404" <- I like this one # note: grows larger and larger the longer VM operates, but won't exceed `(No…

When using a JS hook. this.el.id

Don’t LV ids need to be deterministic? I’ve been warned not to use any kind of non-deterministic generation of ids on here before. Enum.with_index is a good solution. There is also %Form{}.index. Otherwise if there is a schema involved I just schema_name_#{@schema.id}.

I’d still recommend it be something the caller sets and is meaningful. IE attr(:id, :string, required: true) ... <div id={"my-component-#{@id}"}

I will have: defmodule MyAppWeb.Ids do defmacro my_component(id) do quote do "my-component-#{unquote(id)}" end end end and use Ids.my_component(@id) everywhere in the liveview. With another level of indirection, I can avoid potential name collision.

I agree that having the ID be stored somewhere is the best solution. It gives you future-proofing.

:wave: @derek-zhou This might be a stupid question since I’m not very familiar with modern LiveView, but why a macro over a function? Oops, just realized that it’s off-topic. Sorry!

A function will do; maybe I was thinking too much. A macro will expand in compile time so there is less overhead.

What kind of future proofing does this give you? This is one of these things where I feel friction with liveview sometimes. I don’t really want to give some things an id, but I have to for liveview. So I’d rather hide it. To be fair, sometimes you do want an id and then I want to make it visible/e…

Mostly in the ability to change how you generate IDs later, plus also being able to parse them and infer anything internal encoded inside of them (like a DB ID). Granted not the most solid of arguments but I had such needs in the past (not with LV) so I came to appreciate having escape hatches.

[image] slouchpie: The question: how do you avoid duplicate HTML IDs and what is a well-suited function to use for doing it? I swear either Phoenix or Liveview has an internal function for making random uniqueish binary refs in its internals that I’ve stolen for similar purposes before, but I…