Yuisei-Maruyama/MyPortfolio

TaskBoardのリファクタリングができていない

Closed this issue · 1 comments

現行の実装では、各ラベルごとのIssueの内容をクエリで各ラベル名を指定した形で API を叩いて、取得する実装になっている。

const eachIssues = useCallback(async () => {
    const labelNames = ['Todo', 'Doing', 'Closed']

    await labelNames.forEach(async (labelName: string) => {
      await request.get(`/repos/${owner}/${repo}/issues?labels=${labelName}&state=all`).then((res: { data: any }) => {
        if (labelName === 'Todo' && !todoItems?.length) {
          const payload = convertIssueId(res.data)
          setTodo(payload)
        }
        if (labelName === 'Doing' && !doingItems?.length) {
          const payload = convertIssueId(res.data)
          setDoing(payload)
        }
        if (labelName === 'Closed' && !closedItems?.length) {
          const payload = convertIssueId(res.data)
          setClosed(payload)
        }
      })
    })
  }, [todoItems, doingItems, closedItems])

これでは、パフォーマンスとして良くなく、無駄にレンダリングが発生してしまっているため、一度、全ての Issue の情報を取ってきた上でその情報をもとに各Issueラベルのitemsに格納するように実装を書き換える必要がある。

スクリーンショット 2022-01-10 18 02 42

レンダリング回数を6回に抑えるように実装。

スクリーンショット 2022-01-10 18 16 34