userEffectが発火しない理由を知りたい。

こちらのサンプルを参考にuseEffectを実装してみたのですが

Reacct
1import { useEffect, useState } from 'react'
2import './App.css'
3
4function App() {
5  const [count, setCount] = useState(0);
6
7  const handleClick = () => {
8    setCount(count + 1);
9  };
10
11  useEffect(() => {
12    console.log('useEffect');
13  }, [count]);
14
15  return (
16    <div className="App">
17      <h1>UseState, UseEffect</h1>
18      <button onClick={ handleClick }>+</button>
19      <p>{ count }</p>
20
21    </div>
22  )
23}
24
25export default App
26

自己流で書いたコードではcountが変化してもuseEffectが発火しません。どうか理由を教えてください。

React
1import React, { useEffect, useState } from "react";
2import './App.css';
3
4function App() {
5  const [count, setCount] = useState(0);
6  
7  const handleClick = () => {
8    setCount(count + 1);
9  };
10
11  const handleClickMinus = () => {
12    if (count > 0) setCount(count - 1);
13  };
14
15  useEffect= (() => { console.log('useEffectExample') }, [count]); //発火しない
16
17  return (
18    <div className="App">
19     <h1>Hello World</h1>
20      <p>Number is { count }</p>
21      <button onClick={ handleClick }>+</button>
22      <button onClick={ handleClickMinus }>-</button>
23    </div>
24  );
25}
26
27export default App;

参考
React hooksを基礎から理解する (useEffect編)

行動規範の内容に同意します

回答1件

ベストアンサー

useEffect の直後にある= が不要なのでこれを削除するとどうでしょう？

diff
1- useEffect= (() => { console.log('useEffectExample') }, [count]); //発火しない
2+ useEffect(() => { console.log('useEffectExample') }, [count]); //発火しない

投稿2022/07/04 20:08