高齢者が作っている一般的な効能間違い

我々はいくつかの新しい概念を同化し、その理由のために我々は大きな問題を引き起こすことができる細かい詳細を残します.

ほとんどの基本的な実装

import { useEffect } from "react"
const MyComponent = () => {
  useEffect(() => {
    // do something async
  })

  return <div> Hi! </div>
}
export { MyComponent }

今のことは

useEffect(() => {
    // do something async
})

しかし、あなたもこのように見ることができました

const callbackFunction = () => { }
useEffect(callbackFunction)

何useEffect ?
この関数は2つのパラメータを受け取り、最初はコールバック関数と2番目の位置に依存配列を指定します.

const callbackFunction = () => { }
const dependencies = [var1,var2,...] // var1, var2,... comes from outside
useEffect(callbackFunction, dependencies)

このコールバック関数はコールされます:
1 -一度後each レンダリング

const callbackFunction = () => { alert("2nd see this") }
useEffect(callbackFunction)
return <div>1st see this</div>

2 -一度後first レンダリング

const callbackFunction = () => { alert("2nd see this") }
useEffect(callbackFunction, []) // with an empty array [] works like the previous example
return <div>1st see this</div>

3 -そのコンポーネントの前に一度はremove from the screen

 const doSomethingBeforeDestroy = async () => { // unsubscribe }
 const callbackFunction = () => { 
   alert("2nd see this") 
   return doSomethingBeforeDestroy
 }
 useEffect(callbackFunction, []) 
 return <div>1st see this</div>

4 -いつでもdependencies variables changes 値

 const [myVar, setMyVar] = useState("one")
 const handleClick =()=>{ 
   setMyVar("two")
 }
 const callbackFunction = () => { 
   alert("2nd see this but also after the click") 
 }
 useEffect(callbackFunction, [myVar]) 
 return <div click={handleClick}>1st see this and click</div>

最も一般的な間違い

イベントを発表する
例3では注意しなければならないshould always return an asynchronous function あれnever returns a value or change to any state このコンポーネントは破棄されます.

Warning: Can't perform a React state update on an unmounted component. 

このuseeffect returnは、通常、ソケットイベントの購読を解除するために使用されるか、または外部コンポーネントに影響を与えるが、独自のコンポーネントを変更することはありません.

予想外の貸し手
例4では、常に(OKではなく、常に別のポストで話をする場合があります)*関数、オブジェクト、配列などの依存関係としてプリミティブを使用します.利用のみstring, boolean, number .
いけない

const myObject = { message :"hello" }
useEffect(callbackFunction, [myObject]) 

です

const myObject = { message :"hello" }
useEffect(callbackFunction, [myObject.message])

// or 
const myObject = { message :"hello" }
useEffect(callbackFunction, [JSON.stringify(myObject.message)])  

//or 
const myArray = [1,2,3]
useEffect(callbackFunction, [JSON.stringify(myArray)]) 

あなたが1つの変数を使うが、それのような依存関係の中にそれを含まないならば

 const [myVar, setMyVar] = useState("one")
 const handleClick =()=>{ 
   setMyVar("two")
 }
 const callbackFunction = () => { 
   if (!myVar) setMyVar("new user")
 }
 useEffect(callbackFunction, []) // using myVar but not adding as a dependency 
 return <div click={handleClick}>1st see this and click</div>

次のエラーが発生します

React Hook useEffect has a missing dependency: 'myVar'. 
Either include it or remove the dependency array.

関数を依存関係として使う必要がありますuseCallback 次の記事で説明するか、単に無視してくださいeslint このようなコメントを追加する

const callbackFunction = () => { 
    if (!myVar) setMyVar("new user") 
}
useEffect(callbackFunction, [myVar]) // eslint-disable-line react-hooks/exhaustive-deps
// this comment above will ignore the error about the setMyVar function dependency