title: Using hooks in nested functions
body: <p>I'm trying to rewrite a React class component into a functional hooks-based component, but i cannot figure out how to do it. The component logic and JSX looks something like this:</p>
  
  <pre><code>export class LeftPanel extends React.Component&lt;ILeftPanelProps, ILeftPanelState&gt; {
  
  const [menuItemsFullList, setMenuItemsFullList] = useState([{links: []}] as any[]);
  
  useEffect(() =&gt; {
      const { links } = props;
  
      setMenuItemsFullList(links);
  }, props.links);
  ....
  
  return (&lt;&gt;
          &lt;SearchBox
              onChange={_onSearch}
              onClear={_onClearSearchBox}
          /&gt;
              &lt;NavList
                  listEntries={[menuItems]}
              /&gt;
  &lt;/&gt;)
  </code></pre>
  
  <p>Where the function i'm currently rewriting is onClearSearchBox:</p>
  
  <pre><code>private _onClearSearchBox() {
      this.setState({ menuItems: { ...this.state.menuItemsFullList } });
  }
  </code></pre>
  
  <p>I tried naively rewriting it using hooks which turned the setState into this:</p>
  
  <pre><code>function onClearSearchBox() {
       useEffect(() =&gt; setMenuItems(menuItemsFullList));
  }
  </code></pre>
  
  <p>This does not work and i do not know how to restructure the code, as i cannot call hooks inside a non-React component function. Moving it into the React component function as an inner function does not work either.</p>
  
  <p>The error message i'm getting is:</p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: Invalid hook call. Hooks can only be
    called inside of the body of a function component...</p>
  </blockquote>
  
  <p>I believe my mindset is still stuck to the class-based structure, as i cannot figure out how i would go about and refactoring the LeftPanel. How should i go about refactoring _onClearSearchBox to make it work with hooks? </p>