title: HoC with React Hooks
body: <p>I'm trying to port from <code>class component</code> to <code>react hooks</code> with <code>Context API</code>, and I can't figure out what is the specific reason of getting the error.</p>
  
  <h3>First, my Codes:</h3>
  
  <pre><code>// contexts/sample.jsx
  import React, { createContext, useState, useContext } from 'react'
  const SampleCtx = createContext()
  
  const SampleProvider = (props) =&gt; {
    const [ value, setValue ] = useState('Default Value')
    const sampleContext = { value, setValue }
    return (
      &lt;SampleCtx.Provider value={sampleContext}&gt;
        {props.children}
      &lt;/SampleCtx.Provider&gt;
    )
  }
  
  const useSample = (WrappedComponent) =&gt; {
    const sampleCtx = useContext(SampleCtx)
    return (
      &lt;SampleProvider&gt;
        &lt;WrappedComponent
          value={sampleCtx.value}
          setValue={sampleCtx.setValue} /&gt;
      &lt;/SampleProvider&gt;
    )
  }
  
  export {
    useSample
  }
  </code></pre>
  
  <hr>
  
  <pre><code>// Sends.jsx
  import React, { Component, useState, useEffect } from 'react'
  import { useSample } from '../contexts/sample.jsx'
  
  const Sends = (props) =&gt; {
    const [input, setInput ] = useState('')
  
    const handleChange = (e) =&gt; {
      setInput(e.target.value)
    }
    const handleSubmit = (e) =&gt; {
      e.preventDefault()
  
      props.setValue(input)
    }
  
    useEffect(() =&gt; {
      setInput(props.value)
    }, props.value)
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input value={input} onChange={handleChange} /&gt;
        &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    )
  }
  </code></pre>
  
  <h3>Error I got:</h3>
  
  <blockquote>
    <p>Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="noreferrer">https://reactjs.org/warnings/invalid-hook-call-warning.html</a> for tips about how to debug and fix this problem.</p>
  </blockquote>
  
  <h3>Explanation for my code:</h3>
  
  <p>I used <code>Context API</code> to manage the states, and previously I used <code>class component</code>s to make the views. I hope the structure is straightforward that it doesn't need any more details.</p>
  
  <p>I thought it should work as well, the <code>&lt;Sends /&gt;</code> component gets passed into <code>useSample</code> HoC function, and it gets wrapped with <code>&lt;SampleProvider&gt;</code> component of <code>sample.jsx</code>, so that <code>&lt;Sends /&gt;</code> can use the <code>props</code> provided by the <code>SampleCtx</code> context. But the result is failure.</p>
  
  <p>Is it not valid to use the <code>HoC</code> pattern with <code>React hooks</code>? Or is it invalid to hand the mutation function(i.e. <code>setValue</code> made by <code>useState()</code>) to other components through <code>props</code>? Or, is it not valid to put 2 or more <code>function components</code> using <code>hooks</code> in a single file? Please correct me what is the specific reason.</p>