<p dir="auto">It works in class component but in the hooks the val function calling infinity times<br>
can any one have solution for this...........<br>
import React, { useState } from 'react'</p>
<p dir="auto">function Inhook(props) {<br>
const initialState = 0;<br>
const [records, setRecords] = useState([]);<br>
const [count, setCount] = useState(initialState);<br>
const [show, setShow] = useState(false);<br>
const [store, setStore] = useState(initialState);<br>
const [store1, setStore1] = useState(initialState);<br>
setRecords(props.records);</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function val(e) {
    debugger;
    console.log(&quot;hhh&quot;, e);
    setStore(e);
    if (store === store1) {
        if (count == 0) {
            setShow(true);
        }
        else {
            setShow(false);
        }
    }
    else {
        setShow(true);
        setCount(0);
    }
    setCount(count + 1);
    // console.log(count,'counttt');

    setStore1(e);
}
return (
    &lt;div&gt;
        &lt;React.Fragment&gt;
            &lt;br /&gt;
            &lt;div className=&quot;Tree&quot;&gt;
                &lt;h1 style={{ textAlign: &quot;center&quot; }}&gt;Employee Tree&lt;/h1&gt;
                &lt;h3&gt;Test Case 1&lt;/h3&gt;
                &lt;h4&gt;Employee Tree&lt;/h4&gt;
                {
                    records.sort((x, y) =&gt; (x.empName.toLowerCase() &gt; y.empName.toLowerCase()) * 2 - 1),
                    records.map(empId =&gt; {
                        return empId.managerId === 0 ?

                            &lt;ul key={empId.id} &gt;
                                &lt;li style={{ fontWeight: &quot;Bold&quot; }}&gt;{empId.empName.toLowerCase()}
                                    &lt;p&gt;Employees of : {empId.empName.toLowerCase()}&lt;/p&gt;
                                    &lt;ul&gt;
                                        {records.map((s) =&gt; (s.managerId === empId.id ?
                                            &lt;li type=&quot;square&quot; key={s.id}&gt;{s.empName.toLowerCase()}
                                                {
                                                    empId.managerId === s.id ? &lt;p&gt;Employees of : {s.empName.toLowerCase()}&lt;/p&gt; : &lt;p&gt;&lt;/p&gt;
                                                }
                                                {records.map((e) =&gt; (e.managerId === s.id ? &lt;div&gt;
                                                    {
                                                        e.managerId === s.id ? &lt;p &gt;{val(s.id)}&lt;/p&gt; : &lt;p&gt;&lt;/p&gt;
                                                    }
                                                    {
                                                        show ? &lt;p &gt;Employees of : {s.empName.toLowerCase()}&lt;/p&gt; : &lt;p&gt;&lt;/p&gt;
                                                    }
                                                    &lt;li key={e.id} type=&quot;disc&quot; style={{ marginLeft: '120px' }}&gt;{e.empName.toLowerCase()}
                                                    &lt;/li&gt;&lt;/div&gt; : &quot;&quot;
                                                ))}
                                            &lt;/li&gt; : &quot;&quot;
                                        ))}
                                    &lt;/ul&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt; : &quot;&quot;
                    })}
            &lt;/div&gt;
        &lt;/React.Fragment&gt;
    &lt;/div&gt;
)"><pre class="notranslate"><code class="notranslate">function val(e) {
    debugger;
    console.log("hhh", e);
    setStore(e);
    if (store === store1) {
        if (count == 0) {
            setShow(true);
        }
        else {
            setShow(false);
        }
    }
    else {
        setShow(true);
        setCount(0);
    }
    setCount(count + 1);
    // console.log(count,'counttt');

    setStore1(e);
}
return (
    &lt;div&gt;
        &lt;React.Fragment&gt;
            &lt;br /&gt;
            &lt;div className="Tree"&gt;
                &lt;h1 style={{ textAlign: "center" }}&gt;Employee Tree&lt;/h1&gt;
                &lt;h3&gt;Test Case 1&lt;/h3&gt;
                &lt;h4&gt;Employee Tree&lt;/h4&gt;
                {
                    records.sort((x, y) =&gt; (x.empName.toLowerCase() &gt; y.empName.toLowerCase()) * 2 - 1),
                    records.map(empId =&gt; {
                        return empId.managerId === 0 ?

                            &lt;ul key={empId.id} &gt;
                                &lt;li style={{ fontWeight: "Bold" }}&gt;{empId.empName.toLowerCase()}
                                    &lt;p&gt;Employees of : {empId.empName.toLowerCase()}&lt;/p&gt;
                                    &lt;ul&gt;
                                        {records.map((s) =&gt; (s.managerId === empId.id ?
                                            &lt;li type="square" key={s.id}&gt;{s.empName.toLowerCase()}
                                                {
                                                    empId.managerId === s.id ? &lt;p&gt;Employees of : {s.empName.toLowerCase()}&lt;/p&gt; : &lt;p&gt;&lt;/p&gt;
                                                }
                                                {records.map((e) =&gt; (e.managerId === s.id ? &lt;div&gt;
                                                    {
                                                        e.managerId === s.id ? &lt;p &gt;{val(s.id)}&lt;/p&gt; : &lt;p&gt;&lt;/p&gt;
                                                    }
                                                    {
                                                        show ? &lt;p &gt;Employees of : {s.empName.toLowerCase()}&lt;/p&gt; : &lt;p&gt;&lt;/p&gt;
                                                    }
                                                    &lt;li key={e.id} type="disc" style={{ marginLeft: '120px' }}&gt;{e.empName.toLowerCase()}
                                                    &lt;/li&gt;&lt;/div&gt; : ""
                                                ))}
                                            &lt;/li&gt; : ""
                                        ))}
                                    &lt;/ul&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt; : ""
                    })}
            &lt;/div&gt;
        &lt;/React.Fragment&gt;
    &lt;/div&gt;
)
</code></pre></div>
<p dir="auto">}<br>
export default Inhook</p>
<p dir="auto">Hello,</p>
<p dir="auto">I have an error regarding hooks in a lerna architecture project where we import a ux lib made of style component inside a react project.<br>
If component are host in the same app, error is not thrown.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Report a bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">An error is thrown:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost/static/js/main.chunk.js:121537:23)
    at resolveDispatcher (http://localhost/static/js/main.chunk.js:122922:36)
    at useRef (http://localhost/static/js/main.chunk.js:122956:28)
    at useStateWithGetter (http://localhost/static/js/main.chunk.js:39121:71)
    at useField (http://localhost/static/js/main.chunk.js:39161:35)
    at http://localhost/static/js/main.chunk.js:39417:27
    at renderWithHooks (http://localhost/static/js/0.chunk.js:70682:22)
    at mountIndeterminateComponent (http://localhost/static/js/0.chunk.js:72686:17)
    at beginWork (http://localhost/static/js/0.chunk.js:73237:20)
    at performUnitOfWork (http://localhost/static/js/0.chunk.js:77166:16)
    at workLoop (http://localhost/static/js/0.chunk.js:77207:28)
    at renderRoot (http://localhost/static/js/0.chunk.js:77287:11)
    at performWorkOnRoot (http://localhost/static/js/0.chunk.js:78232:11)
    at performWork (http://localhost/static/js/0.chunk.js:78142:11)
    at performSyncWork (http://localhost/static/js/0.chunk.js:78116:7)
    at requestWork (http://localhost/static/js/0.chunk.js:77971:9)
    at scheduleWork (http://localhost/static/js/0.chunk.js:77778:9)
    at scheduleRootUpdate (http://localhost/static/js/0.chunk.js:78482:7)
    at updateContainerAtExpirationTime (http://localhost/static/js/0.chunk.js:78508:14)
    at updateContainer (http://localhost/static/js/0.chunk.js:78576:14)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost/static/js/0.chunk.js:78889:7)
    at http://localhost/static/js/0.chunk.js:79041:18
    at unbatchedUpdates (http://localhost/static/js/0.chunk.js:78359:14)
    at legacyRenderSubtreeIntoContainer (http://localhost/static/js/0.chunk.js:79037:9)
    at Object.render (http://localhost/static/js/0.chunk.js:79112:16)
    at boot (http://localhost/static/js/main.chunk.js:207505:52)
    at http://localhost/static/js/main.chunk.js:207517:10"><pre class="notranslate"><code class="notranslate">Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost/static/js/main.chunk.js:121537:23)
    at resolveDispatcher (http://localhost/static/js/main.chunk.js:122922:36)
    at useRef (http://localhost/static/js/main.chunk.js:122956:28)
    at useStateWithGetter (http://localhost/static/js/main.chunk.js:39121:71)
    at useField (http://localhost/static/js/main.chunk.js:39161:35)
    at http://localhost/static/js/main.chunk.js:39417:27
    at renderWithHooks (http://localhost/static/js/0.chunk.js:70682:22)
    at mountIndeterminateComponent (http://localhost/static/js/0.chunk.js:72686:17)
    at beginWork (http://localhost/static/js/0.chunk.js:73237:20)
    at performUnitOfWork (http://localhost/static/js/0.chunk.js:77166:16)
    at workLoop (http://localhost/static/js/0.chunk.js:77207:28)
    at renderRoot (http://localhost/static/js/0.chunk.js:77287:11)
    at performWorkOnRoot (http://localhost/static/js/0.chunk.js:78232:11)
    at performWork (http://localhost/static/js/0.chunk.js:78142:11)
    at performSyncWork (http://localhost/static/js/0.chunk.js:78116:7)
    at requestWork (http://localhost/static/js/0.chunk.js:77971:9)
    at scheduleWork (http://localhost/static/js/0.chunk.js:77778:9)
    at scheduleRootUpdate (http://localhost/static/js/0.chunk.js:78482:7)
    at updateContainerAtExpirationTime (http://localhost/static/js/0.chunk.js:78508:14)
    at updateContainer (http://localhost/static/js/0.chunk.js:78576:14)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost/static/js/0.chunk.js:78889:7)
    at http://localhost/static/js/0.chunk.js:79041:18
    at unbatchedUpdates (http://localhost/static/js/0.chunk.js:78359:14)
    at legacyRenderSubtreeIntoContainer (http://localhost/static/js/0.chunk.js:79037:9)
    at Object.render (http://localhost/static/js/0.chunk.js:79112:16)
    at boot (http://localhost/static/js/main.chunk.js:207505:52)
    at http://localhost/static/js/main.chunk.js:207517:10
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong><br>
Use this <a href="https://github.com/ppinel/test-informed-hooks">public repo</a> and follow the readme.<br>
It's a good representation of our project's architecture.<br>
You will experience the error.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Not throwing an error about hooks and displaying a working form.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
Well, didn't tested before 16.8.0. But using <a href="https://github.com/react-tools/react-form">react-form</a> instead of <a href="https://github.com/joepuzzo/informed">informed</a> works.<br>
An <a href="https://github.com/joepuzzo/informed/issues/167">issue</a> has been open on informed repository.<br>
II have the feeling that it's more related to React than informed itself.</p>
<p dir="auto">I am aware of <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow">this page</a> but nothing worked.</p>