title: State being reset
body: <p>Newbie to React &amp; React hooks. I'm trying to understand why my state is being overwritten by initialState.</p>
  
  <p>When I input a value, things work as expected. However when I resize the window it resets it to the initialState and I'm not sure why.
  After inserting values into the inputs <code>updateBox</code> displays the correct values.</p>
  
  <p>Can anybody break this down for me as to what is happening?</p>
  
  <p><a href="https://stackblitz.com/edit/react-hdf3sg" rel="noreferrer">https://stackblitz.com/edit/react-hdf3sg</a></p>
  
  <pre><code>
  import React,{useState,useEffect,useRef} from 'react';
  import './Layout.scss';
  
  const initLayout = {
    size:{
      width: 16,
      height: 16,
    }
  }
  const clone = (obj) =&gt; {
    return JSON.parse(JSON.stringify(obj));
  }
  
  const Layout = ({props}) =&gt; {
  
    const boxContainer = useRef(null);
  
    const [layoutState,setLayoutState] = useState(initLayout)
    const [boxStyle,setBoxStyle] = useState({
      "height": "100%",
      "width": "90%",
    })
  
    useEffect(() =&gt;{
      // State did update
      console.log("useEffect:State did update:",layoutState.size.width,":",layoutState.size.height)
      // updateBox()
    });
  
    useEffect(() =&gt;{
      // Component did mount
      console.log("Component did mount")
      window.addEventListener("resize", updateBox);
      return () =&gt; {
        window.removeEventListener("resize", updateBox);
      };
    }, []);
  
    useEffect(() =&gt; {
      // This state did update
      console.log("layoutState did update",layoutState)
      updateBox()
    }, [layoutState]);
  
    const updateBox = () =&gt; {
      console.log("updateBox",layoutState.size.width,":",layoutState.size.height)
  
      let percentage = (layoutState.size.height/layoutState.size.width) * 100
      if(percentage &gt; 100){
        percentage = 100
      }
      percentage = percentage+"%"
  
      // console.log("percentage",percentage)
  
      const cloneBoxStyle = clone(boxStyle)
  
      cloneBoxStyle.width = "100%"
      cloneBoxStyle.height = percentage
      setBoxStyle(cloneBoxStyle)
  
      // console.log("boxContainer",boxContainer)
      // console.log("height",boxContainer.current.clientHeight)
      // console.log("width",boxContainer.current.clientWidth)
  
    }
  
  
  
    const sizeRatioOnChange = (widthArg,heightArg) =&gt; {
      let width = (widthArg === null) ? layoutState.size.width : widthArg;
      let height = (heightArg === null) ? layoutState.size.height : heightArg;
  
      const cloneLayoutState = clone(layoutState);
      cloneLayoutState.size.width = width
      cloneLayoutState.size.height = height
  
      setLayoutState(cloneLayoutState)
    }
  
    const render = () =&gt; {
      console.log("render",layoutState.size.width,":",layoutState.size.height)
      // updateBox()
      // const enlargeClass = (true) ? " enlarge" : "" ;
  
      return (
        &lt;div className={"layout"} &gt;
          &lt;div className="layout-tools-top"&gt;
            Layout Size Ratio 
            &lt;input 
              type="number" 
              value={layoutState.size.width} 
              onChange={(e) =&gt; {sizeRatioOnChange(e.target.value,null)}}/&gt;
            by
            &lt;input 
              type="number" 
              value={layoutState.size.height} 
              onChange={(e) =&gt; {sizeRatioOnChange(null,e.target.value)}}/&gt;
  
            &lt;button className="button close"&gt;
              Close
            &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div className="layout-container"&gt;
            &lt;div className="layout-tools-side"&gt;
              &lt;h2&gt;Header&lt;/h2&gt;
              &lt;ul&gt;
  
              &lt;/ul&gt;
              &lt;form&gt;
                &lt;input type="text" placeholder="Add Item" /&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div className="layout-box-container" ref={boxContainer}&gt;
              &lt;div className="layout-box" style={boxStyle}&gt;
                {/* {boxStyle.height} x {boxStyle.width} */}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    return render();
  };
  
  export default Layout;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/H7WgM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/H7WgM.png" alt="enter image description here"></a></p>