title: Cannot destructure property of null
body: <p>I have a component that destructures <code>user</code> from its <code>auth</code> prop:</p>
  
  <pre><code> const Profile = ({
       auth: {user}
   }) =&gt; {...}
  </code></pre>
  
  <p>The problem is that when I am developing, Nodemon keeps refreshing my page whenever I save any changes. When the component tries to mount, it throws an error that it can't destructure <code>user</code> from <code>auth</code> because <code>auth</code> is null at that point (until I navigate the site and re-login).</p>
  
  <p>Is there an elegant way of handling this? I took a look at <a href="https://medium.com/@crunchtech/object-destructuring-best-practice-in-javascript-9c8794699a0d" rel="noreferrer">this article</a>, but I can't do something like <code>const { user } = auth || {}</code>. Well.. I mean, I can, but I want to destructure from the props, not do <code>const { user } = auth || {}</code> in the function body.</p>