DayPickについて - Githubissues

https://github.com/arifuku1028/react-lesson2/blob/dd7bfc07c4719962428ac9250fab426eba90580e/src/components/DayPick.jsx#L8-L32

const containerStyle = css`
    display: flex;
    justify-content: center;
    text-align: center;
  `;

スタイリングの定義は関数コンポーネントの外側に書いてあげても良いですね

ステートを参照しない
ステートの更新ごとに無駄に再計算される
スタイリングの定義を関数コンポーネントの外に出すことでコンポーネント自体が少しみやすくなる

let footer = <p>日付を選択してください。</p>;
  if (selectedDay) {
    footer = <p>{format(selectedDay, "PP")} が選択されています</p>;
  }

JSXの定義が散らばると可読性が下がりやすくなります今はコード量自体が少ないので気になりませんが。 JSXの記述はreturn文のなかに集めておくと見やすくなりますまた、JSXのなかでselectedDayをもとに出しわけするので三項演算子を使ってあげると良いです💡

テンプレ的なのを作るとすると以下のイメージです（全てのコンポーネントが必ずこれに当てはまるわけではないです）

const Component = () => {
  // ステートの定義など

  // onClickなどのイベントハンドラなど
  // onClickから呼び出される関数など

  return (
    // JSXの記述をここに集めることで「どんな見た目か？」を見るときに１箇所だけ見れば良いので楽
  )
}

コンポーネントの書き方は色々文化がある気がするのであくまでも一例ですね技術書など読んでいると、以下のようなサンプルコードを見かけることもあります〜（ご参考まで〜）

const Component = () => {
  // ステートの定義など

  // onClickなどのイベントハンドラなど
  // onClickから呼び出される関数など

  if(loading) {
    return // ローディング中のJSX
  }
  if(error){
    return // エラー時のJSX
  }

  return (
    // 
  )
}

コード可読性や再レンダリング最適化の観点からスタイル定義はコンポーネント外での定義が望ましいのですね。そのように変更しました。 ''footer'についてもreturn文の中に三項演算子を用いて記述するように変更しました。確かにJSXをreturn文にまとめると見やすくなりました。三項演算子の使い方にも慣れていこうと思います。テンプレもありがとうございます。自分の中である程度決まった書き方を持っておくと整理がしやすくバグ防止にもなると思うので、今後意識していきたいと思います。

変更箇所：https://github.com/arifuku1028/react-lesson2/pull/8

arifuku1028 / react-lesson2

DayPickについて #5