title: ReactJS: Props not loading on initial render. Cannot use map on undefined variable
body: <p>I have a complex react application with many components.
  The first thing is when the user logs in, I fetch the information from the database and store it in a global state, the child components then get the value using props and then I load the relevant data.</p>
  <p>This is what a component looks like:</p>
  <pre><code>const ProfileForm12 = (props) =&gt; {
    const { profile } = props
    ...
    ...
    profile.map(x=&gt;console.log(x))
  }
  export default ProfileForm12 
  </code></pre>
  <p>Here I initially I get an error that crashes the application, because the profile is null on initial render, but on the second render, the data loads.</p>
  <p>How can I solve this issue without using useState or useEffect because the application already uses a lot of state and using them are causing too many re-renders.</p>
  <p>I tried putting this inside an if loop, but then the data wont load on the frontend.</p>
  <p>UPDATE: All the suggestions below worked. I will take some time to see which one works well with my application but thank you all for your answers :)</p>