title: React: How to skip useEffect on first render
body: <p>I'm trying to use the <code>useEffect</code> hook inside a controlled form component to inform the parent component whenever the form content is changed by user and return the DTO of the form content. Here is my current attempt</p>
  
  <pre><code>const useFormInput = initialValue =&gt; {
    const [value, setValue] = useState(initialValue)
  
    const onChange = ({target}) =&gt; {
      console.log("onChange")
      setValue(target.value)
    }
  
    return { value, setValue, binding: { value, onChange }}
  }
  useFormInput.propTypes = {
    initialValue: PropTypes.any
  }
  
  const DummyForm = ({dummy, onChange}) =&gt; {
  
    const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
    const {value: bar, binding: barBinding} = useFormInput(dummy.value)
  
    // This should run only after the initial render when user edits inputs
    useEffect(() =&gt; {
      console.log("onChange callback")
      onChange({foo, bar})
    }, [foo, bar])
  
    return (
      &lt;div&gt;
        &lt;input type="text" {...fooBinding} /&gt;
        &lt;div&gt;{foo}&lt;/div&gt;
  
        &lt;input type="text" {...barBinding} /&gt;
        &lt;div&gt;{bar}&lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;DummyForm dummy={{value: "Initial"}} onChange={(dummy) =&gt; console.log(dummy)} /&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>However, now the effect is ran on the first render, when the initial values are set during mount. How do I avoid that?</p>
  
  <p>Here are the current logs of loading the page and subsequently editing both fields. I also wonder why I get that warning of missing dependency.</p>
  
  <pre><code>onChange callback
  App.js:136 {foo: "Initial", bar: "Initial"}
  backend.js:1 ./src/App.js
    Line 118:  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
  r @ backend.js:1
  printWarnings @ webpackHotDevClient.js:120
  handleWarnings @ webpackHotDevClient.js:125
  push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:190
  push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
  (anonymous) @ main.js:282
  push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
  push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
  WebSocketTransport.ws.onmessage @ websocket.js:36
  App.js:99 onChange
  App.js:116 onChange callback
  App.js:136 {foo: "Initial1", bar: "Initial"}
  App.js:99 onChange
  App.js:116 onChange callback
  App.js:136 {foo: "Initial1", bar: "Initial2"}
  </code></pre>