Matching two divs height on resize in React - reactjs

Question

I have this
const divRef = createRef()
const [dimensions, setDimensions] = useState({ width: 1, height: 2 })
const useRefDimensions = (ref) => {
useEffect(() => {
if (ref.current) {
const { current } = ref
const boundingRect = current.getBoundingClientRect()
const { width, height } = boundingRect
setDimensions({ width: Math.round(width), height: Math.round(height) })
}
}, [ref])
return dimensions
}
useRefDimensions(divRef)
On the render...
<Row>
<Col md={12} lg={7}>
<Card bg="dark" ref={divRef}>
Some image or video here
</Card>
</Col>
<Col md={12} lg={5}>
<PerfectScrollbar style={{height: dimensions.height}} >
<Card bg="dark">
Some stuff in here
</Card>
</PerfectScrollbar>
</Col>
</Row>
I can make it work (sort of) but only if I use the ref dependency. Problem is, I get an error and what it looks like an infinite loop
index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
EDIT - The entire component
import React, {useState, useEffect, useRef} from 'react'
import { Card, Row, Col } from 'react-bootstrap'
import PerfectScrollbar from 'react-perfect-scrollbar'
import succession from '../../assets/images/succession/succession.jpeg'
import successiontrailerposter from '../../assets/images/succession/succesion trailer.jpg'
import successiontrailer from '../../assets/images/succession/successionTrailer.mp4'
import {ReactVideo} from 'reactjs-media'
const metadata = [
{
title: "Succession",
source: "HBO",
type: "Original",
mediatype: "TV Series",
rating: "TV-MA",
seasons: 3,
episodes: 30,
poster: succession,
trailerposter: successiontrailerposter,
trailer: successiontrailer,
summary: "When Logan Roy (Brian Cox) announces his plans to step back from running the family's multi-national entertainment company, a feud over who will be have control causes tension among his four children.",
info: [
{
releasedate: "June 3, 2018",
availabilitydate: "May 27, 2020",
runtime: "56 - 70 minutes",
genres:[ "Drama", "Comedy-Drama", "Black-Comedy" ],
tags: ["Patriarchy", "finance", "based on true story" ],
regions: ["North America", "Latin America"],
language: "English",
awards: ["Golden Globe: Best TV Series"],
prod_budget: "$50,000,000",
marketing_budget: "$3,000,000",
}
]
}
]
const Home = () => {
const divRef = useRef()
const [dimensions, setDimensions] = useState({ width: 1, height: 2 })
useEffect((ref) => {
if (ref.current) {
const { current } = ref
const boundingRect = current.getBoundingClientRect()
const { width, height } = boundingRect
setDimensions({ width: Math.round(width), height: Math.round(height) + 35 })
}
return dimensions
}, [dimensions])
return (
<div className="container-fluid pt-3 px-5">
{metadata.map((item, index) => {
return (
<div key={index}>
<div className="d-flex align-items-end justify-content-between pb-4">
<h1 className="item-title m-0 text-primary text-bold">{item.title}</h1>
<div className="d-flex flex-column align-items-end justify-content-end">
<p className="m-0">{item.source} {item.type} | {item.mediatype} | {item.rating}</p>
<p className="m-0">Seasons: {item.seasons} ({item.episodes} episodes)</p>
</div>
</div>
<Row>
<Col xs={12} md={3} lg={2}>
<Card bg="dark">
<Card.Img variant="top" src={item.poster} />
</Card>
</Col>
<Col xs={12} md={9} lg={10}>
<Row className="media-info">
<Col
md={12}
lg={7}
className="media-container" >
<Card bg="dark" ref={divRef}>
<ReactVideo
src={item.trailer}
poster={item.trailerposter}
className="video-player"/>
</Card>
</Col>
<Col
md={12}
lg={5}
className="metadata-container" >
<PerfectScrollbar style={{ height: dimensions.height }}>
<Card bg="dark">
<Card.Body>
<div className="mb-3">
<h4 className="card-h4">Series Summary</h4>
<p className="card-p">{item.summary}</p>
</div>
<div>
<h4 className="card-h4">Series Metadata</h4>
<ul className="card-ul">
<li>
<label>Release Date: </label>
<span>{item.info[0].releasedate}</span>
</li>
<li>
<label>HBO Max First Availability Date: </label>
<span>{item.info[0].availabilitydate}</span>
</li>
<li>
<label>Runtime: </label>
<span>{item.info[0].runtime}</span>
</li>
<li>
<label>Genre(s): </label>
{ item.info[0].genres.map((genre, index) => {
return (
<span key={`genre_${index}`}>
{ (index ? ', ' : '') + genre }
</span>
)
})}
</li>
<li>
<label>Plot Tag(s): </label>
{ item.info[0].tags.map((tag, index) => {
return (
<span key={`tag_${index}`}>
{ (index ? ', ' : '') + tag }
</span>
)
})}
</li>
<li>
<label>Region Availability: </label>
{ item.info[0].regions.map((region, index) => {
return (
<span key={`region_${index}`}>
{ (index ? ', ' : '') + region }
</span>
)
})}
</li>
<li>
<label>Original Language: </label>
<span>{item.info[0].language}</span>
</li>
<li>
<label>Awards: </label>
{ item.info[0].awards.map((award, index) => {
return (
<span key={`award_${index}`}>
{ (index ? ', ' : '') + award }
</span>
)
})}
</li>
<li>
<label>Production Budget: </label>
<span>{item.info[0].prod_budget}</span>
</li>
<li>
<label>Marketing Budget: </label>
<span>{item.info[0].marketing_budget} </span>
</li>
</ul>
</div>
</Card.Body>
</Card>
</PerfectScrollbar>
</Col>
</Row>
</Col>
</Row>
</div>
)
})}
</div>
)
}
export default Home

Answer 1

You are creating a new ref every time setDimensions is called. Change createRef to useRef. I'd also remove the useRefDimensions function and just call useEffect directly.
const divRef = useRef(null)
const [dimensions, setDimensions] = useState({ width: 1, height: 2 })
useEffect(() => {
if (divRef.current) {
const { current } = divRef
const boundingRect = current.getBoundingClientRect()
const { width, height } = boundingRect
setDimensions({ width: Math.round(width), height: Math.round(height) })
}
}, [divRef])