title: React Hooks: how to resize a single div?
body: <p>So I have this problem that I cannot resize a single div because my mouseup is not working...</p>
  
  <pre><code>    const [ isResizable, setIsResizable ] = useState(false);
      const [ newWidth, setIsNewWidth ] = useState(width);
  
      function handleResize() {
          setIsResizable(true);
      }
  
  
      function handleMouseMove(event) {
          if(isResizable) {
              let offsetRight =
              document.body.offsetWidth - (event.clientX - document.body.offsetLeft);
              let minWidth = 50;
              let maxWidth = 700;
              if(offsetRight &gt; minWidth &amp;&amp; offsetRight &lt; maxWidth) {
                  setIsNewWidth(offsetRight);
                  console.log(width);
              }
          }
      }
  
      function handleMouseUp() {
          setIsResizable(false);
      }
  
      useEffect(() =&gt; {
          document.addEventListener('mousemove', e =&gt; handleMouseMove(e));
          document.addEventListener('mouseup', () =&gt; handleMouseUp());
      });
  
      return (
          &lt;div
              className={`relative-drawer`}
              style={{
                  width: newWidth,
                  minWidth: 50
              }}&gt;
              &lt;div className={"dragable"} onMouseDown={() =&gt; handleResize()}&gt;&lt;/div&gt;
          &lt;/div&gt;
      );
  </code></pre>
  
  <p>Does anyone have an answer for this problem? I have tried alot but everything triggers as expected except the mousemove won't stop when handleMouseUp is called.</p>