[terandle]

Check out valtio if you want to do proxy based state management in react.

https://github.com/pmndrs/valtio

https://codesandbox.io/s/bitter-night-mm4xes?file=/src/App.j...

    // a.js

    import { proxy } from "valtio";

    export const a = proxy([]);
    a.push(1);

    // App.jsx

    import { useSnapshot } from "valtio";
    import { a } from "./a";

    const add = () => a.push(a.length + 1);

    export default function App() {
      const snap = useSnapshot(a);
      return (
        <div>
          <ul>
            {snap.map((value, index) => (
              <li key={index}>{`${index}=>${value}`}</li>
            ))}
          </ul>
          <button onClick={add}>Add element</button>
        </div>
      );
    }