孤独プログラマー譚

孤独死が近い。

React hooks useEffect

え、useEffect便利すぎへん?
Vue.js3未満にそういう機能ないように思うけど…。
Vue.js3(Vue-next)が出るまで、完全にReactがリードしてるような…。


increment1のボタンをクリックした時のみ、コンソールが出力される。

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

const FooComponent = () => {
  const [count1, setCount1] = useState(0)
  const plusOne1 = () => setCount1(count1 + 1)

  const [count2, setCount2] = useState(0)
  const plusOne2 = () => setCount2(count2 + 1)

  useEffect(() => {
    console.log(123)
  }, [count1]);

  return (
    <div className="App">
      <div>
        <button onClick={plusOne1}>increment1</button>
      </div>
      <div>{count1}</div>

      <div>
        <button onClick={plusOne2}>increment2</button>
      </div>
      <div>{count2}</div>
    </div>
  )
};

export default FooComponent;