title: How to update the value of useRef hook on window resize
body: <p>I have a table component that has a fixed first column when scrolling horizontally. I do this by positioning it absolutely. This cause a problem.</p>
  
  <p>When the window is resized, the contents of the table cells may wrap and cause the cells to resize also in height. I have set up a ref for the table component, so that I can fetch the row heights via javascript and resize the absolutely positioned fixed cells accordingly.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>  const NewStatsTable = ({ headers, stats, data, dataType }) =&gt; {
    const [cellHeights, setCellHeights] = useState([])
    const tableRef = useRef(null)
  
    useLayoutEffect(() =&gt; {
      handleCellHeightResize()
      window.addEventListener('resize', handleCellHeightResize)
      return window.removeEventListener('resize', handleCellHeightResize)
    }, [])
  
    const headersToUse = getHeaders(dataType)
  
    const getData = (item, header) =&gt; {
      if (header === 'gameDate') return formatDate(item[headersToUse[header].id])
      return item[headersToUse[header].id]
    }
  
    const getTallestCellHeights = () =&gt; {
      const rows = Array.from(tableRef.current.getElementsByTagName('tr'))
  
      return rows.map(row =&gt; {
        const fixedCell = row.childNodes[0]
        return Math.max(row.clientHeight, fixedCell.clientHeight)
      })
    }
  
    const handleCellHeightResize = () =&gt; {
      setCellHeights(getTallestCellHeights)
    }
  
    const headerMarkup = () =&gt; (
      &lt;TableRow header&gt;{headers.map(renderHeaderRow)}&lt;/TableRow&gt;
    )
  
    const renderHeaderRow = (header, colIndex) =&gt; {
      const text = headersToUse[header].headerText
      const height = cellHeights[0]
  
      return (
        &lt;TCell
          key={header}
          type='th'
          data={text}
          colIndex={colIndex}
          cellHeight={height}
        /&gt;
      )
    }
  
    const cellMarkup = () =&gt;
      data.map((row, rowIndex) =&gt; (
        &lt;TableRow key={row._id}&gt;
          {headers.map((header, colIndex) =&gt;
            renderRow(header, row, rowIndex, colIndex)
          )}
        &lt;/TableRow&gt;
      ))
  
    const renderRow = (header, row, rowIndex, colIndex) =&gt; {
      const text = getData(row, header)
      const height = cellHeights[rowIndex + 1]
  
      return (
        &lt;TCell
          key={header}
          type='td'
          data={text}
          colIndex={colIndex}
          cellHeight={height}
        /&gt;
      )
    }
  
    return (
      &lt;Container&gt;
        &lt;ScrollContainer&gt;
          &lt;Table ref={tableRef}&gt;
            &lt;TableHead&gt;{headerMarkup()}&lt;/TableHead&gt;
            &lt;TableBody&gt;{cellMarkup()}&lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/ScrollContainer&gt;
      &lt;/Container&gt;
    )
  }
  </code></pre>
  
  <p>The code works, but it doesn't work on resize, it works only when the page is first loaded. If the window is narrow enough, the higher cell height is calculated correctly. The same of course when the window is wide and there is no text wrap in the cells. </p>
  
  <p>When I resize the window, the row height don't get recalculated. I suppose this is because the <code>tableRef</code> is created at page load and it doesn't even if the page is resized.</p>
  
  <p>I tried adding an event listener for <code>resize</code> event, but it doesn't help. <code>getTallestCellHeights</code> still uses the old <code>ref</code> for the calculation.</p>
  
  <p>How can I update the <code>tableRef</code> so that <code>getTallestCellHeights</code> uses the correct heights for its calculations?</p>