ProfileCardのFlipアニメーションができていない

[Yuisei-Maruyama]

ProfileCardを

• ホバーしたら、裏面を表示
• ホバーが外れたら、表面を表示

できるようにする！

[Yuisei-Maruyama]

children が複数ある場合で、children自体がコンポーネント化されている下記のような場合、
コンポーネント化されたProfileCardの内部構造を解釈してくれないため、エラーになる。

Uncaught Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

(Main.tsx)

 <FlippedCard isFlipped={isFlipped} setFlipped={setFlipped} infinite={infinite} setInfinite={setInfinite}>
  <ProfileCard />
</FlippedCard>

(FlippedCard)

type Props = {
  children: React.ReactNode | React.ReactNodeArray
}

・・・

return (
    <>
      {
        Array.isArray(children) && children?.length === 2
          ? (
            <>
              <div key={0}>{ children[0] }</div>
              <div key={1}>{ children[1] }</div>
            </>
          )
          : <p> FlippedCard need two elements!!</p>
      }
    </>
  )

(ProfileCard)

<Card>
 <CardContent></CardContent>
</Card>
<Card>
 <CardContent></CardContent>
</Card>

[Yuisei-Maruyama]

なので、ProfileCardを表面と裏面に分けて、対応を考える。

[Yuisei-Maruyama]

上記で対応できた！！

[Yuisei-Maruyama]

propsに height を渡せるようにして、サイズ調整

[Yuisei-Maruyama]

ProfileCardにホバーすることで無駄なレンダリングが起きていることが発覚！

[Yuisei-Maruyama]

上記に対応するためにコンポーネントのメモ化 (React.memo)を行って、レンダリングが無駄に発生するのを抑える！

上記の問題が起きる原因は、

対象のコンポーネントの親コンポーネントの state が変更されたことで親コンポーネント配下の全て子コンポーネントが反応してレンダリングをかけることに起因する。

それをメモ化を行うことで防ぐ！！

[Yuisei-Maruyama]

やり方は下記のようにする！

import { memo } from 'react'

const Child = ({ title }) => {
  console.log(`render child component`)

  return (
    <div>
      {title}
    </div>
  )
}
// ここでメモ化する
export default memo(Child)

[Yuisei-Maruyama]

こんな感じでホバーでY軸状に180°回るようにした！