SolidJS createStore proxy write access and missing read-only boundary

Answer the core question first

SolidJS 1.8.x’s createStore returns a mutable Proxy. The API offers no flag or option to make that proxy read‑only. If you hand the proxy directly to a component or export it from a module, any consumer can mutate the state, which will trigger reactive updates everywhere.

Why this is intentional

• Solid’s reactivity is based on property access and assignment on the same proxy. Freezing the proxy with Object.freeze would break dependency tracking.
• The library prioritises performance and a minimal API surface over object‑level access control. Encapsulation is left to the developer.

Recommended pattern for safe, read‑only sharing

1. Keep the store reference private. Declare it inside a module and never export the raw proxy.

   import { createStore } from "solid-js/store";
   
   const [state, setState] = createStore({ count: 0 }); // private
   

2. Export only read‑only getters (or snapshot helpers).

   export const getState = () => state;
   export const getCount = () => state.count;
   

3. Use a wrapper that returns a shallow clone or a memoised snapshot. A shallow clone preserves reactivity for nested objects but prevents direct mutation.

   export const getSnapshot = () => ({ ...state });
   

4. For components that need to trigger updates, export a dedicated action.

   export const increment = () => setState("count", c => c + 1);
   

5. Never expose setState or the raw proxy unless intentional.

Optional: Use immer for immutable snapshots

If you need to pass immutable data to many consumers, wrap state with produce from immer before sending it out:

import produce from "immer";
export const getImmutable = () => produce(state, draft => draft);

This keeps the original store mutable internally but gives consumers a frozen copy.

Diagnostic question

Do you currently pass the store proxy directly to child components via props or export it from the module? If so, switching to the pattern above will prevent accidental mutations.

Verification steps (optional)

• Try to mutate a property in a child component that receives the proxy via props; the global state should change.
• After refactoring to the read‑only getter pattern, attempt the same mutation; the global state should remain unchanged.