Some confusion about storing HTMLElement in state

[lmk123]

https://codesandbox.io/p/sandbox/valtio-to-do-list-forked-9l3mf6

I use createRoot().render() to manually manage the creation and destruction of React components. Now, I need to pass an HTMLElement to my component. So, I store the HTMLElement in the state, then subscribe for changes to the state and re-render the component using createRoot().render() whenever there is a change.

However, in practice, I found that even if I just read the HTMLElement's attributes it would report an error. Tried using snapshot but that didn't help.

So my question is: can't I store the HTMLElement in the state, even if I just read some of its properties and don't make any changes?

ref doesn't seem to work in this case either, since it doesn't allow passing null as an argument.

II'd love to automate and manage this process with Valito. If I can't use Valito I'll have to re-render manually:

const state = { a: null, b: 2 }

state.a = document.createElement('div')
// ... some other change ...

// manually render
root.render(<App ele={state.a} count={state.b} />)

[dai-shi]

How about this?

state.a = ref(document.createElement('div'))

[lmk123]

So simple...

When I read the documentation, I thought ref could only be used in proxy() 😂

[dai-shi]

Yeah, fyi, actually, ref is just making a side effect, so it just returns the same object:

valtio/src/vanilla.ts

Lines 319 to 322 in 24753f6

	export function ref<T extends object>(obj: T) {
	refSet.add(obj)
	return obj as T & { $$valtioSnapshot: T }
	}