useReactive

useReactive is a React adaptation of Vue's reactive, designed to create trackable reactive objects. It is suitable for proxyable structures such as objects, arrays, Maps, and Sets.

Basic Usage

This scenario demonstrates the most common read and write operations on object state. You can directly modify properties, and the view will update automatically.

const state = useReactive({
  count: 0,
  name: 'Gemini',
});

<p>Name: {state.name}</p>
<p>Count: {state.count}</p>

<button onClick={() => state.count++}>count++</button>
<button onClick={() => (state.name = 'React Proxy')}>Modify Name</button>

Deep Nested Reactivity

This scenario illustrates that deep objects and arrays can also be tracked. Operations like push and deep field modifications can trigger correct updates.

const state = useReactive({
  user: { profile: { age: 25 }, tags: ['React', 'Vue'] },
});

state.user.profile.age++;
state.user.tags.push('New Tag');

Shallow Reactivity

useShallowReactive only tracks first-level properties. It is suitable for large objects or scenarios where you only care about top-level replacement.

const state = useShallowReactive({
  count: 0,
  nested: { val: 100 },
});

state.count++; // Triggers update
state.nested.val++; // Does not trigger update
state.nested = { val: 200 }; // Triggers update

API

type ReactiveState<T> = T extends WrapRef<any> ? UnwrapRef<T> : T;

function useReactive<T extends object>(target: T): ReactiveState<T>;

function useShallowReactive<T extends object>(target: T): ReactiveState<T>;

Notes

• For primitive types, it is recommended to use useVRef.
• useShallowReactive does not perform deep recursive proxying.
• Passing an already proxied object will be reused directly.