## GameContext possible issues
If too many frequent changes, will trigger all components that use the GameContext to re-render.
https://github.com/facebook/react/issues/15156

import React, { useCallback, useState } from "react";

import React, { useCallback, useMemo, useState } from "react";

import { GameContext, UIContext } from "./contexts";
import { Chunk } from "./pixi/Chunk";
import { Vector2 } from "./lib/util/geometry/vector2";

  const [focusedNode, setFocusedNode] = useState({ chunk: null, node: null });

  const [focusedNode, setFocusedNode] = useState < { chunk: Chunk, node: Vector2 }>();
  const uiState = useMemo(() => ({ focusedNode }), [focusedNode]);
  const game = useMemo(() => ({}),[])

      console.log("asdf");

      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
  </header> */}
      <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
      <NodeDetail focusedNode={focusedNode} />

      <GameContext.Provider value={game}>
        <UIContext.Provider value={uiState}>
            <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
            <NodeDetail focusedNode={focusedNode} />
        </UIContext.Provider>
      </GameContext.Provider>

const a = [1, 2, 3, 4, 5, 6];

export function NodeDetail({ focusedNode }: { focusedNode: {chunk: any, node: any} }) {
  const [history, setHistory] = useState<{ chunk: any, node: any }[]>([]);
  console.log(focusedNode);

export function NodeDetail({
  focusedNode,
}: {
  focusedNode?: { chunk: any; node: any };
}) {
  const [history, setHistory] = useState<{ chunk: any; node: any }[]>([]);

    if (focusedNode.chunk === null) return;

    if (!focusedNode || focusedNode?.chunk === null) return;

        <h1>Current</h1>
        <h3>Chunk: {focusedNode.chunk?.id}</h3>
        <h3>X: {focusedNode.node?.x}</h3>
        <h3>Y: {focusedNode.node?.y}</h3>
        <h2>Previous</h2>
        {history
          
          .map(({ chunk, node }, i) => {
              return (
                <div key={i}>
                  Chunk {chunk?.id} at {node?.x},{node?.y}
                </div>
              );
            })
          
          .reverse()}

        {focusedNode && focusedNode.chunk && (
          <>
            <h1>Current</h1>
            <h3>
              Chunk: {focusedNode.chunk.location.x},
              {focusedNode.chunk.location.y}
            </h3>
            <h3>X: {focusedNode.node.x}</h3>
            <h3>Y: {focusedNode.node.y}</h3>
            <h2>Previous</h2>
            {history
              .slice(0, -1)
              .map(({ chunk, node }, i) => {
                return (
                  <div key={i}>
                    Chunk ({chunk.location.x},{chunk.location.y}) at ({node.x},
                    {node.y})
                  </div>
                );
              })
              .reverse()}
          </>
        )}

import React from "react";
import { Vector2 } from "./lib/util/geometry/vector2";
import { Chunk } from "./pixi/Chunk";
export const GameContext = React.createContext<{
  [k: string]: any;
}>({});
export const UIContext = React.createContext<{
  focusedNode?: { chunk: Chunk; node: Vector2 };
}>({});