const MyReact = (() => {
  const memorizedStates = []
  let cursor = 0

  function useMemo(nextCreate, deps) {    if (!memorizedStates[cursor]) {      const nextValue = nextCreate()      memorizedStates[cursor] = [nextValue, deps]      cursor = cursor + 1      return nextValue    }    const nextDeps = deps    const [prevValue, prevDeps] = memorizedStates[cursor]    if (prevDeps.every((prev, idx) => prev === nextDeps[idx])) {      cursor = cursor + 1      return prevValue    }    const nextValue = nextCreate()    memorizedStates[cursor] = [nextValue, nextDeps]    cursor = cursor + 1    return nextValue  }
  return {
    // ...
    useMemo,  }
})()

function Board = ({ posts,  tag }) => {
  MyReact.resetCursor()
  function filterPosts() {
    console.log('filterPosts')
    return posts.filter(post => tag ? post.tag === tag : true)
  }
  const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag])
  return (
    <ul>
      {filteredPosts.map(post => (
        <li key={id}>
          {content} <span>#{tag}</span>
        </li>
      ))}
    </ul>
  )
}

function Board = ({ posts, tag }) => {
  console.log('Board rendered')
  MyReact.resetCursor()

  const [darkTheme, setDarkTheme] = React.useState(false)
  function filterPosts() {
    console.log('filterPosts')
    return posts.filter(post => (tag ? post.tag === tag : true))
  }
  const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag])

  return (
    <>
      <div>        <button onClick={() => setDarkTheme(!darkTheme)}>테마 변경</button>        <span>{darkTheme ? "어두운 테마" : "밝은 테마"}</span>      </div>      <hr />
      <ul>
        {filteredPosts.map(post => (
          <li key={id}>
            {content} <span>#{tag}</span>
          </li>
        ))}
      </ul>
    </>
  )
}

const MyReact = (() => {
  function memo(TargetComponent) {    return (nextProps) => {      if (!TargetComponent.memorizedState) {        const nextValue = React.createElement(TargetComponent, nextProps)        TargetComponent.memorizedState = [nextValue, nextProps]        return nextValue      }      const [prevValue, prevProps] = TargetComponent.memorizedState      const sameProps = Object.keys(nextProps).every((key) => {        return nextProps[key] === prevProps[key];      });      if (sameProps) return prevValue;      const nextValue = React.createElement(TargetComponent, nextProps)      TargetComponent.memorizedState = [nextValue, nextProps]      return nextValue    }  }
  return {
    // ...
    useMemo
    memo  }
})();

function Board = ({ posts, tag }) => {
  MyReact.resetCursor()

  const [darkTheme, setDarkTheme] = React.useState(false)

  function filterPosts() {
    return posts.filter(post => (tag ? post.tag === tag : true))
  }

  const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag])
  return (
    <>
      <div>{darkTheme ? "어두운 테마" : "밝은 테마"}</div>
      <button onClick={() => setDarkTheme(!darkTheme)}>테마 변경</button>
      <hr />
      <FilteredPosts value={filteredPosts} />    </>
  )
}

const Board = ({ post, tag }) => {
  const handleClick = postId => {    console.log("handleClick", postId)  }
  return (
    // ...
    <FilteredPosts value={filteredPosted} onClick={handleClick} />  )
}

function Board = ({ posts, tag }) => {
  const handleClick = MyReact.useMemo(() => (postId) => {    console.log('handleClick', postId)  }, [])
  return (
    {/* 생략 */}
    <FilteredPosts value={filteredPosted} onClick={handleClick} />  )
}

const MyReact = (function MyReact() {
  // ...

  function useCallback(callback, deps) {    return useMemo(() => callback, deps)  }
  return {
    // ...
    useMemo
    memo,
    useCallback,  }
})();

const Board = ({ posts, tags }) => {
  // ...

  const handleClick = MyReact.useCallback(postId => {    console.log("handleClick", postId)  }, [])
  return <FilteredPosts value={filteredPosted} onClick={handleClick} />
}

function mountMemo(nextCreate, deps) {
  const hook = mountWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps
  const nextValue = nextCreate()
  // 튜플 형태로서 최근 하나의 값만 캐시한다  hook.memoizedState = [nextValue, nextDeps]  return nextValue
}

function updateMemo(nextCreate, deps) {
  const hook = updateWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps
  // 캐시한 값이 하나 뿐이다.  const prevState = hook.memoizedState  if (nextDeps !== null) {
    const prevDeps: Array<mixed> | null = prevState[1]
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0]
    }
  }
  const nextValue = nextCreate()
  // 값이 변경되면 이전 캐시값을 최근 계산한 값으로 교체한다.  hook.memoizedState = [nextValue, nextDeps]  return nextValue
}

const OrderStatusCard = ({ order }) => {
  const { status, orderDate, id, position = [] } = order  const { openDialog, closeDialog } = MyLayout.useDialog()
  const calculateDeliveryMinute = () => {    console.log("calculateDeliveryMinute")

    const 오랜시간 = 99999
    for (let i = 0; i < 오랜시간; i++) {}

    if (!position[0]) return "-"
    return `${position[0]}분`
  }
  const expectedDeliveryMinutes = calculateDeliveryMinute()
  const handleClick = () => {    openDialog(
      <Dialog footer={<Button onClick={closeDialog}>확인</Button>}>
        <ul>
          <li>위도: {position[0]}</li>
          <li>경도: {position[1]}</li>
        </ul>
      </Dialog>
    )
  }

  return (
    <Card
      header={
        <>
          <strong>{status}</strong>
          <br />
          짜장면
        </>
      }
      data={[
        { term: "주문일시", description: orderDate },
        { term: "주문번호", description: id },
        {          term: "도착 예상 시간",          description: (            <>              {expectedDeliveryMinutes}              <Button onClick={handleClick}>위치보기</Button>            </>          ),        },      ]}
      footer={
        <>
          <Button>전화</Button>
          <Button>가게보기</Button>
        </>
      }
    />
  )
}

const OrderPage: FC = () => {
  // ...
  React.useEffect(() => {    const timer = setInterval(async () => {      const order = await OrderApi.fetchMyOrder();      setOrder(order);    }, 5000);    return () => clearInterval(timer);  }, []);

const OrderStatusCard: FC<{ order: Order }> = ({ order }) => {
  // ...

  const expectedDeliveryMinutes = React.useMemo(calculateDeliveryMinute,[    position[0],  ]);
  const handleClick = React.useCallback(() => {    // ...  }, [position[0], position[1]]);
  return (
    // ...
          term: "도착 예상 시간",
          description: (
            <ExpectedDeliveryMinutes              value={expectedDeliveryMinutes}              onClick={handleClick}            />          ),
        },
    // ...
  );
};

const ExpectedDeliveryMinutes = React.memo(({ value, onClick }) => {  console.log("ExpectedDeliveryMinutes rendered");

  return (
    <>
      {value}
      <Button onClick={onClick}>위치보기</Button>
    </>
  );
})

const useParams = () => {
  return React.useMemo(() => {    const params = new URLSearchParams(window.location.search)
    const paramObject = {}
    for (const [key, value] of params) {
      paramObject[key] = value
    }
    return paramObject
  }, [window.location.search])
}