Im not a fan of this approach because only serialisable data can be inserted into the DOM and then extracted back out into JS, and while you can simply use the ID tofind the item in the array but doing so will cause so many loops that you lose any performance gained by removing the closures.

While always, it depends on the situation, so it's nice to have it in your pocket should the situation arise.

new function references can cause unwanted re-renders

That's why functional components in React are sucks.

Also most React developers do not even know thatuseMemouseEffectuseState and all other React hooks it is not only "magic hook" - this is functions which do some calculations inside.

Take a look at this great article

mbrizic.com/blog/react-is-insane/

I personally try to get rid of using React hooks, I'm using MVVM and MobX which works with classes

I am inclined to comment, just use Svelte and be happy 😁

It's also not typesafe, and for large data or long lists you will be serialising the data into strings ahead of time, before you even need it. It's cheaper to make a new anonymous function than serialising large data sets to string.
Keeping the data in memory and only accessing when needed is sometimes more preferable.

I like this, I can see the uses for it.
But like everything in writing code, there are many ways to skin a cat.
And as engineers, we need to be aware of the security risks and use this with caution.

OK for UI-related non-sensitive data
Not OK for anything security-sensitive (roles, tokens, permissions)

Safe Use Example:
<div data-product-id={product.id} onClick={handleClick}>{product.name}</div>
function handleClick(e) {
const id = e.currentTarget.dataset.productId;
// Use it to fetch more info securely from backend
}

Unsafe Example:
<div data-auth-token={user.token}>...</div> // Don't leak sensitive data
<div data-role="admin" onClick={showAdminPanel}> // Role-based access is not secure on frontend

With the rise of SSR this may become more important, however I remember the time when getting data out of the DOM was a big push. The thing is, you always want a single source of truth for your data. If you put things in the DOM and have things in memory, you will have to figure which one to trust when they fall out of sync. Moving everything to JavaScript is easy, because AJAX goes straight to JS. The DOM cannot query the server and only understands strings. So if the DOM is your source of truth, how are you going to get data into and out of it? Will it be able to keep up?

you're creating a new function for each item on every render

This isn't quite true. A new function is created each render, but this is the only function that gets called for every item map goes over, not per ID.

For buttons, checkboxes, radio buttons you could also use thename andvalue attributes.

Such a simple trick but so underrated..

I've been using data-* with Stimulus controllers for a while now
I've never used react or know too much JS tho to be honest.