useWindow

Hooks used in this custom hook: useState and useEffect

A text or image can adjust its appearance based on the current browser window size. We experimented with this idea in Chapter 5, Use Effect to Handle Side Effects. See Figure 9.2.

Figure 9.2 – useWindow custom hook

Now the question is: can we abstract this idea out and apply it to anything on the screen as in a responsive design? Let's refactor the code a bit to come up with a custom useWindow hook:

const useWindow = (size = 0) => {
  const [width, setWidth] = useState(0) 
  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth)
    }    
    handleResize()    
    window.addEventListener("resize", handleResize)
    return () => { 
  ...