[自分用]Next.jsのイベント付与とuseCallback

クリックイベント

指定の仕方は３つある。
①下記のようにonClickの中に関数を記述してあげればクリックイベントが適用される。

//関数宣言
<button
  onClick={function (){
    alert(123);
  }}>
  ボタン
</button>

//アロー関数
<button
  onClick={ () => {
    alert(123);
  }}>
  ボタン
</button>

②return外に書くバージョン。

const handleClick = () => {
  alert(123);
}

return(
  <button onClick={handleClick}>
    ボタン
  </button>
)

③さらにコンポーネントの外に出すこともできる。

const handleClick = () => {
  alert(123);
}

export function Header(){
  return(
    <button onClick={handleClick}>
      ボタン
    </button>
  )
}

3つの例を挙げたが、①はあまりお勧めしない。
なぜなら関数の記述が増えたときに、可読性が悪くなるからだ。処理のコードが増えるのなら、HTMLとJSは確実に分けた方がいい。

コンポーネント内で変数を使用するときは②を使用し、特に変数を使用しないのであれば③を使うといい。

下記はコンポーネント内の変数をコンポーネント外で使用するとき。記述のように変数を引数として渡さなければならない。

const handleClick = (foo) => {
  alert(foo);
}

export function Header(){
  const foo = 1;

  return(
    <button 
      onClick={() => { handleClick(foo) 
    }}>
      ボタン
    </button>
  )
}

※ただ②にも注意点があり、コンポーネントが再レンダリングされるとその中のメソッドが再生成されてしまう。
が、解決策がある。
それがuseCallback!

useCallback

useCallbackを使用することによって、処理自体は変わらないがコンポーネントが再レンダリングされたときに再生成されることがなくなる。
記述の仕方は下記の通り。

「（）」と「第二引数」を足すことを忘れないように注意。

import { useCallback } from 'react';

export function Header(){
  const handleClick = useCallbacl( () => {
    alert(123);
  },[]);

  return(
    <button onClick={handleClick}>
      ボタン
    </button>
  )
}

まとめ

基本的には②と③を使っていく。
・②を使うときは、コンポーネント内の変数を使い、記述が煩雑になるとき。
・③を使うときは、コンポーネント内の変数等をあまり扱わないとき。
・①は使わん！