valtio How to replace react's useState and open source hooks

[InfernalAzazel]

e.g ahooks How to use ahooks together

const { data, run, cancel } = useRequest(getUsername, {
  pollingInterval: 3000,
});

e.g 2 const state2 = proxy({ get rrr(){return data?.message}}); How to use it reasonably

"use client";
import React, { useState } from 'react';
import { proxy, useSnapshot } from 'valtio';
import { useQuery } from '@shined/react-use';

const state = proxy({ count: 0, text: '' });

const fetchData = () =>
    new Promise((resolve) => {
        setTimeout(() => {
            resolve({ message: 'Hello, World!' });
        }, 1000);
    });

export default function Home() {
    const snap = useSnapshot(state);
    const [count, setCount] = useState(0);
    const { loading, data, error, run } = useQuery(fetchData, { manual: true });
    const state2 = proxy({ get rrr(){return data?.message}});

    async function add() {
        if (loading) return;
         await run();
        console.log('更新的文本:', state2.rrr);
    }

    function add2() {
        setCount(3);
        console.log('当前计数:', count);
    }

    return (
        <div>
            <div>
                <span>{snap.text}</span>
                <button onClick={add}>测试</button>
            </div>
            <div>
                <span>{count}</span>
                <button onClick={add2}>测试2</button>
            </div>
        </div>
    );
}

[InfernalAzazel]

It would be perfect if we could solve this problem

valtio is somewhat similar to Vue3's built-in state ref... greatly reducing the burden on developers