title: Calculate new width on resize for a React hook
body: <p>I am not sure how can I fix this so that upon screen resize a new width is set. Currently it is failing resize:
  TypeError: el.getBoundingClientRect is not a function
  It calculates the correct width on load but brakes on resize</p>
  <pre><code>import React, { useEffect, useCallback, useState, useLayoutEffect } from 'react'
  import charts from 'charts'
  
  
  const Charts = props =&gt; {
    const
      chartRenderers = {
        line: charts.d3_line(),
        horizontalBar: charts.d3_horizontal_bar(),
        tables: charts.d3_table()
      },
      // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
      useWidth = () =&gt; {
        const
          [width, setWidth] = useState(null),
          ref = useCallback(el =&gt; {
            console.log(el)
            if (el !== null) {
              setWidth(el.getBoundingClientRect().width);
            }
          }, []);
  
        useLayoutEffect(() =&gt; {
          window.addEventListener('resize', ref, false);
          return () =&gt; {
            window.removeEventListener('resize', ref);
          }
        }, [ref])
  
        return [width, ref];
      },
      { component, siteData } = props,
      [width, ref] = useWidth();
  
    useEffect(
      () =&gt; {
        const parsedData = component.type === &quot;tables&quot; ? JSON.parse(siteData) : siteData
        chartRenderers[component.type].renderChart(
          parsedData,
          charts.d3.select(`#${component.id}`),
          width,
          component.height,
          component.options
        )
      }
    )
  
    return &lt;div id={component.id} key={component.id} ref={ref}/&gt;
  }
  export default Charts
  </code></pre>