title: Too many re-renders caused by a custom React Hook
body: <p>I am loading data in from a Neo4J database using <a href="https://github.com/adam-cowley/use-neo4j" rel="nofollow noreferrer">use-neo4j</a> and have created a custom hook. It makes a query to the database and then converts the data to a format I can use for plotting the data.</p>
  <p>It is a lot of code but basically <code>neo4jToJSON</code> converts the data from Neo4J, then I set it to the state, lastly I return the state to be used in other components.</p>
  <p><strong>Note:</strong></p>
  <p>Before this I was just returning <code>neo4jToJSON</code>  and had no issues. But the moment I incorporate state into the function and return the state it throws this error.</p>
  <p><strong>Edit:</strong></p>
  <p>I have tried the suggested answer in the updated code below but now the data just returns undefined.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { useReadCypher } from &quot;use-neo4j&quot;;
  
  const useFetchData = () =&gt; {
    const [jsonData, setJsonData] = useState();
    // Query to Neo4j database to get all the relevant data for all the users
    const getAllUserData = // a query string that is quite long so I didn't include it 
    // Pass query to use-neo4j to get the data
    const { result } = useReadCypher(getAllUserData);
  
    const filters = [
      &quot;name&quot;,
      &quot;longitude&quot;,
      &quot;latitude&quot;,
      &quot;agreeableness&quot;,
      &quot;openness&quot;,
      &quot;neuroticism&quot;,
      &quot;extraversion&quot;,
      &quot;conscientiousness&quot;,
      &quot;angry&quot;,
      &quot;fear&quot;,
      &quot;joy&quot;,
      &quot;sadness&quot;,
      &quot;love&quot;,
      &quot;country&quot;,
      &quot;question1&quot;,
      &quot;question2&quot;,
      &quot;question3&quot;,
      &quot;question4&quot;,
      &quot;question5&quot;,
      &quot;question6&quot;,
      &quot;question7&quot;,
      &quot;question8&quot;,
      &quot;question9&quot;,
      &quot;question10&quot;,
      &quot;question11&quot;,
      &quot;question12&quot;,
      &quot;question13&quot;,
      &quot;question14&quot;,
      &quot;question15&quot;,
      &quot;question16&quot;,
      &quot;question17&quot;,
      &quot;question18&quot;,
      &quot;question19&quot;,
      &quot;question20&quot;,
      &quot;question21&quot;,
      &quot;question22&quot;,
      &quot;question23&quot;,
      &quot;question24&quot;,
      &quot;question25&quot;,
      &quot;question26&quot;,
      &quot;question27&quot;,
      &quot;question28&quot;,
      &quot;question29&quot;,
      &quot;question30&quot;,
      &quot;question31&quot;,
      &quot;question32&quot;,
      &quot;question33&quot;,
      &quot;question34&quot;,
      &quot;question35&quot;,
      &quot;question36&quot;,
      &quot;question37&quot;,
      &quot;question38&quot;,
      &quot;question39&quot;,
      &quot;question40&quot;,
      &quot;question41&quot;,
    ];
    
    useEffect(() =&gt; {
      if (result) {
        const { records } = result;
  
        const neo4jToJSON =
          records &amp;&amp;
          records.map(({ _fields }) =&gt; {
            // User name
            const screenName = _fields[0];
            // Country of the user
            const country = _fields[2][0];
            // Create the object with these values as the keys:
            //
            // &quot;name&quot;,
            // &quot;longitude&quot;,
            // &quot;latitude&quot;,
            // &quot;agreeableness&quot;,
            // &quot;openness&quot;,
            // &quot;neuroticism&quot;,
            // &quot;extraversion&quot;,
            // &quot;conscientiousness&quot;,
            // &quot;angry&quot;,
            // &quot;fear&quot;,
            // &quot;joy&quot;,
            // &quot;sadness&quot;,
            // &quot;love&quot;,
            // &quot;country&quot;
            const userPersonality = filters.reduce((acc, curr, idx) =&gt; {
              if (idx === 0) {
                // set the property name to the screenName
                acc[curr] = screenName;
              } else if (idx &gt;= 1 &amp;&amp; idx &lt;= 12) {
                // if the index is in the range of 1 to 12
                // it belongs to _fields[1]
                // set the properties of _fields[1] to their respective values
                // values come in the form of strings so apply parseFloat on them
                acc[curr] = parseFloat(_fields[1][idx - 1]);
              } else if (idx === 13) {
                // set the property country
                acc[curr] = country;
              }
              return acc;
            }, {});
            const finalResults = filters.reduce((acc, curr, idx) =&gt; {
              const questions = _fields[3];
              if (idx &gt; 13) {
                // Access the first element of the array of arrays which contains
                // the questions by idx - 14
                // The current value starts from idx 14 of filters which is
                // question1
                // So if idx is equal to 14:
                // idx - 14 will give the question for the first question which is
                // at index 0
                //
                // Ternary operator here checks if the array value is not empty if
                // it is not empty then set the value of the current question to be
                // the array of questions
                // Else set the value to be an empty array which is falsy
                questions[idx - 14]
                  ? (acc[curr] = questions[idx - 14])
                  : (acc[curr] = []);
              }
              return acc;
            }, userPersonality);
            return finalResults;
          });
        setJsonData(neo4jToJSON);
      }
    }, []);
    return { jsonData };
  };
  
  export default useFetchData
  </code></pre>