数字が割り切れるときにuseEffectで出力したい

Question

数字が割り切れるときにuseEffectで出力したい

まずは自作のコードをご覧ください。

import React, { useEffect, useState } from "react";
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
  };

  const handleClickMinus = () => {
    if (count > 0) setCount(count - 1);
  };

  useEffect(() => { console.log('useEffectExample')            
 }, [count]);

// countが3になったら、console.log('count is divisible by 3')を実行するようにしたい。
  useEffect(() => { console.log('count is divisible by 3') }, [count]);
 


  return (
    <div className="App">
     <h1>Hello World</h1>
      <p>Number is { count }</p>
      <button onClick={ handleClick }>+</button>
      <button onClick={ handleClickMinus }>-</button>
      <button onClick={ () => setCount(0) }>Reset</button>
    </div>
  );
}

export default App;

handleClickMinus, handleClickなどの間, 既存のuseEffect内に

if(count % 3 === 0){ console.log ( 'count is divisible by 3' )};

を入れたのですが出力されず、returnの前に入れても出力されませんでした。どうしたら数字が割り切れるときに出力できるようにできるでしょうか？どうか教えてください。

Comments

[maisumakun]

質問文のとおりに実装しましたが、問題が再現しません。

https://jsfiddle.net/3s5orued/

[kalon]

私の勘違いだったようです。おっしゃる通り問題なく動いていたようです。console.logの記述を以下のようにしたところ視認性が上がり、動作の動きがはっきり見えるようになりました。
```React
useEffect(() => { if( count % 3 === 0) {console.log(count + ' count is divisible by 3')} }, [count]);
```

Answer 1

私の勘違いだったようです。おっしゃる通り問題なく動いていたようです。console.logの記述を以下のようにしたところ視認性が上がり、動作の動きがはっきり見えるようになりました。

useEffect(() => { if( count % 3 === 0) {console.log(count + ' count is divisible by 3')} }, [count]);

Comments

[kalon]

(もしかすると、サーバーの再起動も功を奏したのかもしれません。)　ご迷惑をおかけしました。