diff --git a/packages/hooks/src/useReactive/__tests__/index.test.tsx b/packages/hooks/src/useReactive/__tests__/index.test.tsx
index c261658709..954d3b71ec 100644
--- a/packages/hooks/src/useReactive/__tests__/index.test.tsx
+++ b/packages/hooks/src/useReactive/__tests__/index.test.tsx
@@ -195,6 +195,36 @@ describe('test useReactive feature', () => {
expect(() => result.current.v.Module).not.toThrowError();
});
+ it('test JSX element', () => {
+ const hook = renderHook(() => useReactive({ html:
foo
}));
+ const proxy = hook.result.current;
+ const wrap = render(proxy.html);
+ const html = wrap.getByRole('id');
+
+ expect(html.textContent).toBe('foo');
+ act(() => {
+ proxy.html = bar
;
+ wrap.rerender(proxy.html);
+ });
+ expect(html.textContent).toBe('bar');
+ hook.unmount();
+ });
+
+ it('test read-only and non-configurable data property', () => {
+ const obj = {} as { user: { name: string } };
+ Reflect.defineProperty(obj, 'user', {
+ value: { name: 'foo' },
+ writable: false,
+ configurable: false,
+ });
+
+ const hook = renderHook(() => useReactive(obj));
+ const proxy = hook.result.current;
+
+ expect(() => proxy.user.name).not.toThrowError();
+ hook.unmount();
+ });
+
it('test input1', () => {
const wrap = render();
diff --git a/packages/hooks/src/useReactive/index.ts b/packages/hooks/src/useReactive/index.ts
index 1543e9b3aa..ddeebd7045 100644
--- a/packages/hooks/src/useReactive/index.ts
+++ b/packages/hooks/src/useReactive/index.ts
@@ -26,6 +26,12 @@ function observer>(initialVal: T, cb: () => void):
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
+ // https://github.com/alibaba/hooks/issues/1317
+ const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+ if (!descriptor?.configurable && !descriptor?.writable) {
+ return res;
+ }
+
// Only proxy plain object or array,
// otherwise it will cause: https://github.com/alibaba/hooks/issues/2080
return isPlainObject(res) || Array.isArray(res) ? observer(res, cb) : res;