title: React Hooks - How to avoid redeclaring functions on every render
body: <p>On a react class I would write something like this</p>
  
  <pre><code>class Myclass extends React.Component {
    handleUpdate = info =&gt; {
      //do the update
    }
  
    render() {
      return (
        &lt;SomeMarkup&gt;
          &lt;SomeComponent onUpdate={this.handleUpdate} /&gt;
        &lt;/SomeMarkup&gt;
      )
    }
  }
  </code></pre>
  
  <p>If using a function I could just write the following</p>
  
  <pre><code>function MyFunction() {
    function handleUpdate(info) {
      // do the update
    }
    return (
      &lt;SomeMarkup&gt;
        &lt;SomeComponent onUpdate={handleUpdate} /&gt;
      &lt;/SomeMarkup&gt;
    )
  }
  </code></pre>
  
  <p>...but with that I'd be redeclaring a function on every render. Is there any sort of trick that would memoize the handler function between renders? Or should I just move the handler out of the render scope? (Moving it out of the render scope requires me that I explicitly pass more parameters since I wont directly have access to the function scope.)</p>