Solution 1 :

in order to access ref in your child component, you need to wrap you component in a React.forwardRef function & use the ref as the second argument & not inside the props object so:

const Child = React.forwardRef((props, ref) => {})

& in your parent you would have:

<Child ref={parentRef}/>

you can read more about it here

Solution 2 :

Make state in parent
Make function takes value and change the state
Pass function from parent to child in props
Execute the function in child with width value

Solution 3 :

You can make use of the ResizeObserver api to listen for the resize event attached on your Parent

import { useEffect, useRef, useState } from "react";

const Child = ({ width = 0 }) => {

  useEffect(() => {
    // listen for the change in width
    // do something here when the width changes
  }, [width]);

  return <p> Parent Div Size: {width} </p>;

const Parent = () => {
  const divRef = useRef(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      // this callback gets executed whenever the size changes
      // when size changes get the width and update the state
      // so that the Child component can access the updated width
      for (let entry of entries) {
        if (entry.contentRect) {

    // register the observer for the div

    // unregister the observer
    return () => resizeObserver.unobserve(divRef.current);
  }, []);

  return (
        textAlign: "center",
        height: "100px",
        border: "solid 1px"
      <Child width={width} />

export default Parent;

Working Sandbox


Resize Observer API

Problem :

Say I have 2 components, Parent and Child. I need a way to access Parents‘s width in Child, and also need useEffect to fire off some code whenever this width changes.

Attempting with useRef gives me an error along the lines of Cannot access clientWidth property of undefined when I use a reference on the parent, and pass it as a prop to child, and try to access it through parentRef.current.clientWidth.


const parentRef = useRef();

  <Parent ref={parentRef}>
    <Child parentRef={parentRef}/>

What do I do?


Comment posted by e.a.

how do you pass the ref?

Comment posted by Sohail Saha

@e.a. Added in the original answer.

Comment posted by e.a.

sorry. I meant how are you using it in the child component. are you using forwardRef? because you can’t consume it like a normal prop

Comment posted by Sohail Saha

@e.a. I am using it as a normal prop. What’s a

Comment posted by e.a.

I posted in the answers to show you the code. It would solve your problem

Comment posted by Sohail Saha

So, if I understand it correctly, I create a parent container with, say

Comment posted by e.a.

yes. other than the export part. where’s the name of the component? 🙂 you can either use a named function & say

Comment posted by Sohail Saha

Could you please clarify what you said?

Comment posted by Sohail Saha

Okay I get you now!