title: Potential issue related to React hooks asked for job interview
body: <p>So I have a React job interview and have this piece of code in my assignment to close and modal box:</p>
  <pre><code>const App = (): ReactElement =&gt; {
  
    const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);
  
    const renderApp = (): ReactElement =&gt; {
      if (isOpen) {
        return &lt;FeedbackForm onClose={() =&gt; setIsOpen(false)} /&gt;;
      }
  
      return &lt;button onClick={() =&gt; setIsOpen(true)}&gt;Open modal&lt;/button&gt;;
    }
  
    if (isOpen) {
      return &lt;&gt;
        &lt;div className='App'&gt;
          &lt;FeedbackForm onClose={() =&gt; setIsOpen(false)} /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    }
  
    return &lt;&gt;
      &lt;div className='App'&gt;{renderApp()}&lt;/div&gt;
  
    }
  
  export default Feedback;
  </code></pre>
  <p>So here I have an <code>App</code> component that has a <code>Modal</code> component and a simple hook that has a boolean value that indicates if the modal is open or not. The modal starts off as closed, so the initial value is <code>false</code>. The button to open the modal is separate from the button that has to close the modal. The button to close the modal is within the <code>Modal</code> component while the button to open it is in the <code>App</code> component. Because they're both separate buttons, they can explicitly set the value to either <code>true</code> or <code>false</code>.</p>
  <p>Now, on this topic, I received this question from the code reviewer:</p>
  <p><code>Could you explain the potential issue of the following code?</code></p>
  <pre><code>const [isOpen, setIsOpen] = useState(false)
  const toggle = () =&gt; setIsOpen(!isOpen);
  </code></pre>
  <p>I can't exactly see the problem in this snippet. I've tried running it with a button that calls <code>toggle()</code> and I see it updating the state perfectly fine. What is the potential issue the interviewer is talking about here?</p>