title: Reactjs separation of UI and business logic
body: <p>I am new to react and I find it sore in the eyes to look at the component flooded with lots of functions and variable initializations together with the UI. Is it possible to separate them?</p>
  <p>Instead of the default setup, like below. How do I separate the business logic into another file?</p>
  <pre><code>function MyComponent() {
      const [data, setData] = useState('');
      const someFunc = () =&gt; {
          //do something.
      };
      ... some 100-liner initializations
  
     return ( 
         ...
     )
  }
  </code></pre>