title: Conditional render + add some extra code in React
body: <p>I'm aware of some of the conditional rendering methods for React components. Some of them can be found <a href="https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e/" rel="nofollow noreferrer">here</a>.</p>
  <p>Using ternary operatiors, if...elses.... But I want to know if theres a way to render a component based on a condition and <strong>perform some calculations before rendering</strong>.</p>
  <p>A normal conditional render will look like this:</p>
  <pre><code>&lt;&gt;
     {myCondition &amp;&amp; (&lt;MyComponent /)}
  &lt;/&gt;
  </code></pre>
  <p>But what I need to know if it's possible to do, is something like this</p>
  <pre><code>&lt;&gt;
     {myCondition &amp;&amp; 
         const myVars = 'Some random vars I need'; // try to gather some info before rendering the component
         return &lt;MyComponent vars={myVars} /&gt;
      }
  &lt;/&gt;
  </code></pre>
  <p>Is there a way to perform this operation before rendering?</p>