title: "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database
body: <p>I'm using React's hook and I want to have a value that is retrieved from the database as the initial value.  However, I'm getting the following error: </p>
  
  <blockquote>
    <p>Invariant Violation: Invariant Violation: Rendered more hooks than
    during the previous render.</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>const { data, loading, error } = useQuery(GET_DATA)
  const { initialValue } = data
  const [value, setValue] = useState(initialValue)
  </code></pre>
  
  <p>I'm using the React Apollo hook.</p>
  
  <p><strong>Update</strong> </p>
  
  <pre class="lang-js prettyprint-override"><code>export default NotificationScreen = ({ navigation }) =&gt; {
      const { data: initialNotificationSettings, loading: loadingInitialSettings, error: initialSettingsError } = useQuery(GET_NOTIFICATION_SETTINGS)
      if (loadingInitialSettings) {
          return (
              &lt;View style={[styles.container, styles.horizontal]}&gt;
                  &lt;ActivityIndicator size="large" color="#FF5D4E" /&gt;
              &lt;/View&gt;
          )
      }
      if (initialSettingsError) return &lt;Text&gt;Error...&lt;/Text&gt;
  
      const {
          borrowerLendingNotificationToken,
      } = initialNotificationSettings.me
      const [borrowerPending, notifyBorrowerPending] = useState(borrowerLendingNotificationToken)
  
      return (
          &lt;SafeAreaView style={styles.container}&gt;
          &lt;/SafeAreaView&gt;
      )
  }
  </code></pre>