To determine the size of a component in ReactJS we have to create the reference to access that object. This can be done by using the createRef method and the useRef hook in React JS.

Prerequisites:

• React JS
• React useRef Hook

Approach:

The size of a component is determined by the height and width of the container. It can be determined if we assign a ref to that component. The useRef function with ref attribute is used to get the current size of the component. 

The useRef hook with ref attribute is here working to create a reference to the component whose size we want to determine.

• useRef: The useRef is a hook that allows to directly create a reference to the DOM element in the functional component.
• Refs: Refs are a function provided by React to access DOM elements and React elements that you might have created on your own.

The useRef returns a ref object. This object has a property called .current. The value is persisted in the refContainer.current property. Then with the help of refContainer.current we will be able to get the height and width of that component. 

To get the height and width of the component we will use:

• width: refContainer.current.offsetWidth
• height: refContainer.current.offsetHeight

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Project structure:

Example: This example uses useRef hook to create the reference and hence determine the height and width of the component.

Javascript

Step to run the application: Run the application using the following command:

npm start

Output: This output will be visible on http://localhost:3000 on the browser window.

size of componen

With the help of the ref object, we are able to determine the width and height of the container which actually is the size of the component.