GatsbyのuseEffectの使い方について。

Question

Gatsbyを使い、以下のコードを書きました。

import React, { useState, useEffect } from "react"
import { useStaticQuery, graphql } from "gatsby"
import { Link } from "gatsby"

const SearchResult = props => {
  // 全記事データ取得 //
  const tempData = useStaticQuery(graphql`
    query SearchData {
      allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              date(formatString: "YYYY-MM-DD")
              title
              title
              path
              tags
            }
          }
        }
      }
    }
  `)
  const [data, setData] = useState([])
  useEffect(() => {
    const temp = []
    tempData.allMarkdownRemark.edges.map(e => {
      return temp.push(e.node.frontmatter)
    })
    setData(temp)
  }, [tempData.allMarkdownRemark.edges])

  // 表示非表示の切り替え //
  const [className, setClassName] = useState("")
  useEffect(() => {
    let id
    if (props.focus && props.value !== "") {
      id = setTimeout(() => {
        setClassName("search--active")
      }, 100)
    } else {
      id = setTimeout(() => {
        setClassName("")
      }, 100)
    }
    return () => {
      clearTimeout(id)
    }
  }, [props.focus, props.value])

  // 検索処理 //
  const [result, setResult] = useState([])
  const search = () => {
    const value = props.value.toLowerCase()
    const temp = data.filter(e => {
      const target = `
        ${e.title.toLowerCase()}
        ${e.tags.join(" ").toLowerCase()}
      `
      return target.indexOf(value) !== -1
    })
    setResult(temp)
  }
  useEffect(() => {
    if (props.value !== "") {
      search()
    }
  }, [props.value])

  return (
    <div className={className}>
      <div className="search--inner u-b-lighter u-bg-white">
        <span className="u-d-flex u-ai-c u-w-100 u-pa-16 u-fs-16 u-bg-lightest">
          <strong>{result.length}</strong>件ヒットしました
        </span>
        <ul className="u-bg-reset u-b-reset u-pa-reset u-list-none">
          {result.map(e => {
            return (
              <li className="u-bt-lighter" key={e.title}>
                <Link className="u-d-flex u-ai-c u-w-100 u-c-darkgray u-fs-14 u-pa-16" to={e.path}>
                  {e.title}
                </Link>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}

const Search = props => {
  const [focus, setFocus] = useState(false)
  const [value, setValue] = useState("")
  const onFocus = () => {
    setFocus(true)
  }
  const onBlur = () => {
    setFocus(false)
  }
  const onChange = e => {
    setValue(e.target.value)
  }
  return (
    <div className="search__input--wrapper u-d-flex u-ai-c u-b-lighter u-pa-8 u-pt-reset u-pb-reset">
      <img className="icon" src="/images/icons/icon_search.svg" alt="" decoding="async" loading="lazy" />
      <input
        type="text"
        placeholder="Search..."
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={onChange}
        className="u-b-reset u-fs-16"
      />
      <SearchResult focus={focus} value={value} />
    </div>
  )
}

export default Search;

そうしたら、以下のようなエラーが出ました。

こちらの解決方法が、ネットで探して色々と試してみましたが、わかりません。

解決方法をご存知の方がいましたら、アドバイスいただけますと、幸いです。

Answer 1

こちらの解決方法が、ネットで探して色々と試してみましたが、わかりません。

React Hook useEffect has a missing dependency: 'search'.と書かれているとおりです。対処法もその直後に書かれています。

Comments

[maisumakun]

対処法まで書いてくれている、かなり親切なエラーメッセージです。

[shinyasato]

言われたメッセージ通りに、追加してみましたが、エラーが解決できませんでしたので、質問させていただきました。

どうやって書くのでしょうか？
具体的に教えていただけると、助かります。

[maisumakun]

useEffect(() => {
if (props.value !== "") {
search()
}
}, [props.value, search])

（枠の都合上、インデントが崩れています）

[maisumakun]

ちなみに、これは警告ですので、出ていてもビルドは完了しています。

[shinyasato]

ありがとうございます！
自分も質問する前に、同じコードを書いて試してみたのですが、
```
56:9 warning The 'search' function makes the dependencies of useEffect Hook (at line 71) change
on every render. Move it inside the useEffect callback. Alternatively, wrap the 'search' definition
into its own useCallback() Hook react-hooks/exhaustive-deps
```
という別の警告が出てしまい、検索機能が使えなくなってしまいました。

確かに警告なのでビルドはできていますが、ずっと警告があるのは気持ち悪いので、解決したいと思っております。

もう少し、自分で検索して調べてみます。

ありがとうございます！

[maisumakun]

こちらにも「 wrap the 'search' definition into its own useCallback() Hook」と対処法が書いてあります。

[shinyasato]

なるほど！
ありがとうございます！
こちら、エラーメッセージを参考に、もう少し調べてやってみます。