title: Where should functions in function components go?
body: <p>I'm trying to convert this cool <code>&lt;canvas&gt;</code> animation I found <a href="https://blog.alexwendland.com/2015/particle-network-js-animations/" rel="noreferrer">here</a> into a React reusable component. It looks like this component would require one parent component for the canvas, and many children components for the <code>function Ball()</code>.</p>
  <p>It would probably be better for performance reasons to make the <code>Balls</code> into stateless components as there will be many of them. I'm not as familiar with making stateless components and wondered where I should define the <code>this.update()</code> and <code>this.draw</code> functions defined in <code>function Ball()</code>.</p>
  <p>Do functions for stateless components go inside the component or outside? In other words, which of the following is better?</p>
  <p>1:</p>
  <pre><code>const Ball = (props) =&gt; {
      const update = () =&gt; {
          ...
      }
  
      const draw = () =&gt; {
          ...
      }
  
      return (
         ...
      );
  }
  </code></pre>
  <p>2:</p>
  <pre><code>function update() {
       ...
  }
  
  function draw() {
       ...
  }
  
  const Ball = (props) =&gt; {
      return (
         ...
      );
  }
  </code></pre>
  <p>What are the pros and cons of each and is one of them better for specific use cases such as mine?</p>