title: How to use custom hook (fetch) with typescript
body: <p>I have created a custom hooks called useFetch.</p>
  <pre><code>import { useState, useEffect } from 'react'
  
  export const useFetch = (url: string, options?: object) =&gt; {
      const [response, setResponse] = useState(null);
      const [error, setError] = useState(null);
  
      useEffect(() =&gt; {
        const fetchData = async () =&gt; {
          try {
            const res = await fetch(url, options);
            const json = await res.json();
            setResponse(json);
          } catch (error) {
            setError(error);
          }
        };
        fetchData();
      }, []);
  
      return { response, error };
    };
  </code></pre>
  <p>But destructuring <code>useFetch</code> and typing it with typescript fails as if the answer may be null</p>
  <pre><code>import React, { FunctionComponent } from 'react'
  import { useFetch } from '../../hooks/useFetch'
  
  export const ListOfMovies: FunctionComponent = () =&gt; {
      const { response, error }: { response: object, error: object} = useFetch(&quot;http://www.omdbapi.com/?apikey=****&amp;s=batman&amp;page=2&quot;)
      
      if (!response) return &lt;h2&gt;Loading...&lt;/h2&gt;
  
      if (error) return &lt;h2&gt;Error&lt;/h2&gt;
  
      return (
          &lt;div&gt;
              &lt;h2&gt;Lista de películas&lt;/h2&gt;
              {response.Search.map(movie =&gt; (
                  &lt;p&gt;{movie.Title}&lt;/p&gt;
              ))}
          &lt;/div&gt;
      )
  }
  </code></pre>