title: Question regarding useToggle(custom hook) vs useState hook in react
body: <p>Below code is a custom Hook called useToggle from a website, it's defined as a custom hook that can be useful when showing/hiding a modal but I don't understand why to go through such code for such a simple feature. Isn't it better to just use <code>useState()</code></p>
  <p><strong>useToggle custom hook</strong></p>
  <pre><code>import { useCallback, useState } from 'react';
  // Usage
  function App() {
      // Call the hook which returns, current value and the toggler function
      const [isTextChanged, setIsTextChanged] = useToggle();
      
      return (
          &lt;button onClick={setIsTextChanged}&gt;{isTextChanged ? 'Toggled' : 'Click to Toggle'}&lt;/button&gt;
      );
  }
  // Hook
  // Parameter is the boolean, with default &quot;false&quot; value
  const useToggle = (initialState = false) =&gt; {
      // Initialize the state
      const [state, setState] = useState(initialState);
      
      // Define and memorize toggler function in case we pass down the component,
      // This function change the boolean value to it's opposite value
      const toggle = useCallback(() =&gt; setState(state =&gt; !state), []);
      
      return [state, toggle]
  }
  </code></pre>
  <p><strong>Just using normal useState()</strong></p>
  <pre><code>const [shouldDisplayModal, setShouldDisplayModal] = useState(false);
  
  &lt;&gt;
      {shouldDisplayModal &amp;&amp; (
        &lt;Modal&gt;
          &lt;ModalContent
            modalText={messageContent}
            primaryButtonText={buttonText}
            secondaryButtonText={NO_MESSAGE}
            modalIconState={modalIconState}
            handleClick={toggleSaveModal}
          /&gt;
        &lt;/Modal&gt;
      )}
          &lt;Button handleClick={toggleSaveModal} mainButton={false}&gt;
            Save
          &lt;/Button&gt;
          &lt;Button handleClick={togglePublishModal} mainButton={true}&gt;
            Publish
          &lt;/Button&gt;
  
    &lt;/&gt;
  </code></pre>