タブ切り替え時のstate更新

Question

nextjs初心者です。
詰まったところがあるのでご相談させてください。

やろうとしていること・困っている箇所

現在nextjsを使用してAページ、Bページを用意して
共通パーツでタブコンポーネントを用意しています。
Aページのタブを押すとAページが表示され、Bページのタブを押すとBページが表示されるようになっています。

実装自体はできたのですが、lintを走らせた時に以下のエラーが出たので実装方法に不安が出たため相談させて頂きたく思っております。

warning  React Hook useEffect has missing dependencies: 'isA', 'isB', and 'props.type'. Either include them or remove the dependency array. You can also do a functional update 'setIsA(i => ...)' if you only need 'isA' in the 'setIsA' call

コード

pages配下に
Apage、Bpageディレクトリを置いています。

Apage

import React from 'react'
import type { NextPage } from 'next'
import { ContentPage } from '~/components/pages/ContentPage'

type Props = {}

const Apage: NextPage<Props> = props => {
  return (
    <>
      <ContentPage type="A" />
    </>
  )
}

export default Apage

Bpage

import React from 'react'
import type { NextPage } from 'next'
import { ContentPage } from '~/components/pages/ContentPage'

type Props = {}

const Bpage: NextPage<Props> = props => {
  return (
    <>
      <ContentPage type="B" />
    </>
  )
}

export default Bpage

components/pages配下にContentPageディレクトリを追加しています。

components/pages/ContentPage/index.tsx

import React from 'react'
import { Tab } from './tab'

type Props = {
  type?: string
}

export const ContentPage: React.FC<Props> = props => {
  return (
    <>
      <Tab currentPage={props.type} />
      {props.type == "A" ? (
        <p>Aページです。</p>
      ) : (
        <p>Bページです。</p>
      )}
    </>
  )
}

components/pages/ContentPage/tab.tsx

import React from 'react'
import React, { useState, useEffect } from 'react'


type Props = {
  type?: string
}

export const ContentPage: React.FC<Props> = props => {
  const [isA, setIsA] = useState(false)
  const [isB, setIsB] = useState(false)

  useEffect(() => {
    props.type === 'A' && setIsA(!isA)
    props.type === 'B' && setIsB(!isB)
  }, [])

  return (
    <>
      <div>
        <p isActived={isA}>Aページ</p>
        <p isActived={isB}>Bページ</p>
      </div>
    </>
  )
}

{* ここにisActived=trueになってる方にborderをつけるcssを記述 *}

このような感じで実装しました。
まとめると
page/配下にApage,Bpageを作成し、
components/pagesの配下にcontentPageを作成
それをpage/配下のApage,Bpageで呼び出す。

contentPage内のindexでは
page/配下のApage,Bpageでそれぞれ渡されるpropsのtypeを判定しテキストを表示。
tabコンポーネントに、渡ってきたprops.typeを渡し
tabコンポーネント内でuseStateでisAとisBのstateを定義。
useEffect内でprops.typeの値を見てstateの値を更新。
stateの値がtrueになってるものにcssでborderをつけるといった感じになっています。

動き自体に問題はないかなと思っているのですが、警告が出ているので
どう書けばいいのか、どう実装するのがいいのかを聞きたいです。

対応したこと

エラー文を翻訳などで確認したところ、
isA,isB,props.typeを依存配列に含めるか、削除してくださいとのことだったので
useEffectの第2引数について調べたところ
第２引数には依存する値を入れるとその値が変わった時にuseEffectが走るとのことなので
今回の場合だとurlが変わったタイミング(Apageか Bpage)だけでしか判断しないので第２引数はから配列にしましたが、それでもうまく動かずどうすればいいのか詰まりました。

Answer 1

今回の場合だとurlが変わったタイミング(Apageか Bpage)だけでしか判断しないので第２引数はから配列にしましたが

この時点で正しくありません。中でprops.typeが変わったことを検知したいのであれば、それを配列に入れる必要があります（空配列だと、「最初に一度実行した後は、何があっても処理しない」という意味になります）。

---

現状のコードでは、props.typeがA→B→Aのように移り変わった場合に、isAはfalseでisBはtrueとなりますが、それは意図した動作でしょうか？

Comments

[teach]

ご回答頂きありがとうございます。

> この時点で正しくありません。中でprops.typeが変わったことを検知したいのであれば、それを配列に入れる必要があります（空配列だと、「最初に一度実行した後は、何があっても処理しない」という意味になります）。

この部分は配列に[props.type]を入れるべきということでしょうか？

> 現状のコードでは、props.typeがA→B→Aのように移り変わった場合に、isAはfalseでisBはtrueとなりますが、それは意図した動作でしょうか？

ここはApageとBpageでurl変わるので
Apageに初回アクセス時→ isAはtrue, isBはfalse
Bpageに初回アクセス時→isAはfalse,isBはtrue
になるだけで
ApageでBpageへのリンクを押した場合isAもisBもリセットされるものと思っていましたがどうなんでしょうか？

[teach]

手元で動作確認していますが、
何回繰り返しても
pageAにいる時にはisAがtrue
pageBにいる時にはisBがtrueの状態になっています。