title: HOC's and Render Props With Functional Components in React 16
body: <p>I'm somewhat confused on the relationship between functional components in React and the Render Props and HOC patterns.</p>
  
  <p>That is, </p>
  
  <p>is it true that the only way to create Render Prop is with a class component?
  is it true that the only way to create an HOC is with a class component?</p>
  
  <p>And the same for usage.</p>
  
  <p>I'm trying to find examples of Render Props and HOC's with functional components and all I find are class components. I get that React Hooks do a lot of the same, but I'm trying to understand how the Render Props and HOC patterns can apply to functional components (or if they do at all)</p>
  
  <hr>
  
  <p>Edit Below:</p>
  
  <p>Applying what @chaimFriedman suggested, this is what I came up with using no class or component for an HOC hoping it makes sense.</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import useAxios from 'axios-hooks';
  
  function withFetching(url) {
    return function(Speakers) {
      return () =&gt; {
        const [speakerData, setSpeakerData] = useState([]);
        const [isLoading, setIsLoading] = useState(true);
        const [{ data, loading }, refetch] = useAxios('http://localhost:4000/speakers');
        useEffect(() =&gt; {
          setSpeakerData(data);
          setIsLoading(loading);
        }, [loading]);
  
        if (isLoading) return &lt;div&gt;loading..&lt;/div&gt;;
  
        return &lt;Speakers data={speakerData}&gt;&lt;/Speakers&gt;;
      };
    };
  }
  
  const Speakers = function(props) {
    //debugger;
    return (
      &lt;ul&gt;
        {props.data.map((speaker) =&gt; (
          &lt;li key={speaker.id}&gt;
            &lt;span&gt;
              {speaker.firstName} {speaker.lastName}
            &lt;/span&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    );
  };
  
  const API = 'http://localhost:4000/speakers';
  export default withFetching(API)(Speakers);
  </code></pre>