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;