wrap clients with `useState`

[geoknee]

This means they should persist between renders.

I'm not sure if we are seeing any issues with this at the moment.

Here's a MWE that can be pasted into the react playground:

import React, {useState} from 'react';

export function App(props) {
  const a = {b: "foo"}
  const [c] = useState({b: "foo"})
  const [d,setd] = useState(0)
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>{JSON.stringify(a)}</h2>
            <h2>{JSON.stringify(c)}</h2>
      <button onClick={()=>{a.b="bar"; c.b="bar"; setd(4)}}>modify</button>
    </div>
  );
}

Calling setd (this is like our app setting things like ownerBalance) triggers a re-render. The a variable's change is overwritten so it is as if it never happened. The c variable is managed by React and persists on re-renders.

Clicking the button results in

{"b":"foo"}
{"b":"bar"}