【Next.js】コンポーネント2通りの作り方

getInitialPropsが非推奨になったり何かと頭が追いつかずやる気無くなってくるので忘れないようにメモ的にまとめようかと。

注）TypeScriptなので.tsxです

①関数コンポーネント

この関数は、データの入った “props”（「プロパティ」の意味）というオブジェクトを引数としてひとつ受け取り、React 要素を返すので、有効な React コンポーネントです。これは文字通り JavaScript の関数ですので、このようなコンポーネントのことを “関数コンポーネント (function component)” と呼びます。
▶︎引用元：https://ja.reactjs.org/docs/components-and-props.html

/**
* components/Sample.tsx
*/

import * as React from 'react'

type Props = {
 hoge?: string
}

const Sample: React.FC<Props> = ({
 children,
 hoge = 'ほげほげ',
}) => (
 <>
   { hoge }
   <div>
     { children }
   </div>
 </>
)

export default Sample

React.FCはReact.FunctionComponentのショートハンドなので積極的に使っっていきましょう。

②クラスコンポーネント

/**
* components/Sample.tsx
*/

import * as React from 'react'

class Sample extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     hoge: 'ほげほげ'
   };
 }
 render() {
   return (
     <>
       { hoge }
     </>
   );
 }
}
export default Sample

で、どちらを使えばいいの？

ClassだとstateやcomponentDidMountなどいろいろな機能が使えるということだったけど、hookの登場で機能的な違いはなくなったみたいです。

ただし、気をつけるべきは　値の動向　です。基本的に関数コンポーネント はレンダリング時の値を保持しているので、例えば親からpropsで渡された値がレンダリング後のイベントで書き換わったとしてもレンダリング時に渡された値を保持しているため変化ありません。

その点、クラスは this.props という書き方になるので、常に自分のpropsを参照しているため書き変わればレンダリング内の値も変わります。

ここらへん、わかりやすく解説しているのが下記のサイトでした。

つまり、

基本的には書き方がシンプル（パフォーマンスも良いみたい？）な 関数コンポーネント+hook を使いつつ、値が変わらないで不都合が生じるならレンダリング時の値を確認する。というが個人的な指針とすることにします。