How to Tame readonly from useSnapshot

[Marsony]

Good day, and thanks for the amazing library!

I have a question: when we pass any state into useSnapshot, it converts all types to readonly. As a result, libraries like slate-react or framer-motion start complaining about this readonly behavior.

What’s the best way to handle this? Obviously, we can work around it using deep-clone, but what would be the optimal approach?

Previously, when we worked with Zustand, we could simply extract something from the state and freely pass it into any components without any issues. Now, we have to find a way to coexist with readonly.

[dai-shi]

If it's TS only issue, you can assert type.

const snap = useSnapshot(state) as typeof state;

See also:

valtio/README.md

Lines 51 to 64 in 86de4ec

	<summary>Note for TypeScript users: Return type of useSnapshot can be too strict.</summary>
	The `snap` variable returned by `useSnapshot` is a (deeply) read-only object.
	Its type has `readonly` attribute, which may be too strict for some use cases.
	To mitigate typing difficulties, you might want to loosen the type definition:
	```ts
	declare module 'valtio' {
	function useSnapshot<T extends object>(p: T): T
	}
	```
	See [#327](https://github.com/pmndrs/valtio/issues/327) for more information.

[Marsony]

If it's TS only issue, you can assert type.

const snap = useSnapshot(state) as typeof state;

See also:

valtio/README.md

Lines 51 to 64 in 86de4ec

	<summary>Note for TypeScript users: Return type of useSnapshot can be too strict.</summary>
	The `snap` variable returned by `useSnapshot` is a (deeply) read-only object.
	Its type has `readonly` attribute, which may be too strict for some use cases.
	To mitigate typing difficulties, you might want to loosen the type definition:
	```ts
	declare module 'valtio' {
	function useSnapshot<T extends object>(p: T): T
	}
	```
	See [#327](https://github.com/pmndrs/valtio/issues/327) for more information.

Thanks for the response. What should I do if libraries like slate-react don't work with proxies and crash when trying to operate? Should I solve this problem using cloneDeep?

[overthemike]

That could be a solution, though I think it would depend on how big your state is going to get. You're essentially doubling the size of that part of the state object. I'd make sure to only clone the piece that you might need. Is this a known issue with that library?

[Marsony]

That could be a solution, though I think it would depend on how big your state is going to get. You're essentially doubling the size of that part of the state object. I'd make sure to only clone the piece that you might need. Is this a known issue with that library?

It's hard to say, I've been using it recently