title: Handling UI State in Remix.run
body: <p>I am trying out remix and ohh boy.. I am stuck on creating a simple counter (clicking button increase count)</p>
  <p>I guess I am not supposed to use the useState hook so I tried my luck with loader and action as I believe that this is where it should be handled in Remix</p>
  <p>What I have on my component is:</p>
  <pre><code>export default function Game() {
      const counter = useLoaderData();
  
      return (
          &lt;&gt;
              &lt;div&gt;{counter}&lt;/div&gt;
              &lt;div&gt;
                  &lt;Form method=&quot;post&quot;&gt;
                      &lt;button type=&quot;submit&quot;&gt;click&lt;/button&gt;
                  &lt;/Form&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>Server:</p>
  <pre><code>import { ActionFunction, LoaderFunction } from 'remix';
  
  let counter: number = 0;
  
  export const loader: LoaderFunction = async () =&gt; {
      console.log('game object!', counter);
      return counter;
  };
  
  export let action: ActionFunction = async ({ request, params }) =&gt; {
      console.log('[action] game object!', ++counter);
      return counter;
  };
  </code></pre>
  <p>The code above will have counter always resetting to 0 on every click</p>
  <p>Looked around some repositories and what I can find are those storing in Cookie/DB/SessionStorage etc, however what if I just want a simple state for my UI?</p>