title: React.JS - Child Componenet Not Updating When Recieving Props (Function Components)
body: <p>I have a higher order functional component in my app that passes JSON to it's child component. I am using react Hooks to manage state. I can't use componentDidUpdate since this is not a class component. </p>
  
  <p>I'm using <code>useEffect()</code> to get it to process the JSON on initial render, but after that I can't seem to get it to update. I've confirmed the PROPS are indeed changing and the JSON is unique (it changes on the click of a button).</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function FormSection(props) {
      const [questions, updateQuestions] = useState([]);
      const [sectionJSON, updateSectionJSON] = useState(props.json);
  
      const fetchQuestionsData = json =&gt; {
         /* API CALL TRANSFORM JSON INTO HTML FOR USE ELSEWHERE IN THE APP */
      };
  
      useEffect(() =&gt; {
          fetchQuestionsData(sectionJSON);
      }, [sectionJSON]);
  
      ...
  
  }
  </code></pre>
  
  <p>I've also tried changing the <code>useEffect()</code> hook to use props directly:</p>
  
  <pre><code>    useEffect(() =&gt; {
          fetchQuestionsData(props.json);
      }, [props.json]);
  </code></pre>
  
  <p>The parent componenet is calling it as follows:</p>
  
  <pre><code>    &lt;FormSection key={i} json={newJSON} /&gt;
  </code></pre>
  
  <p>Is there something obvious I am missing? </p>