React Ref: Syntax, Usage, and Examples

React refs give you direct access to DOM elements or component instances without triggering re-renders. They are useful for handling focus, animations, measuring elements, and integrating with third-party libraries. You can create refs using React.createRef() in class components or useRef() in functional components.

How to Use React Ref

React provides two main ways to create and use refs.

Using React.createRef() in a Class Component

                  

                    jsx
                    
                      
                    
                  
                  

                    import React, { Component } from "react";

class InputField extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

                  
                

Using useRef() in a Functional Component

                  

                    jsx
                    
                      
                    
                  
                  

                    import React, { useRef } from "react";

function InputField() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

                  
                

Both approaches allow direct interaction with the <input> element without triggering re-renders.

When to Use React Ref

Accessing DOM Elements Directly

Refs help when you need to access a DOM element without updating the component state. You might use them for focusing an input field, controlling animations, or measuring an element’s size.

                  

                    jsx
                    
                      
                    
                  
                  

                    const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

                  
                

Storing Values Without Causing Re-Renders

Unlike state, updating a ref does not trigger a re-render. This makes refs useful for tracking values that need to persist between renders, such as previous values or render counts.

                  

                    jsx
                    
                      
                    
                  
                  

                    const count = useRef(0);

useEffect(() => {
  count.current += 1;
  console.log("Render count:", count.current);
});

                  
                

Managing Third-Party Libraries

When working with non-React libraries like D3.js, Chart.js, or jQuery, refs allow direct access to elements.

                  

                    jsx
                    
                      
                    
                  
                  

                    import { useEffect, useRef } from "react";
import Chart from "chart.js";

function ChartComponent() {
  const canvasRef = useRef(null);

  useEffect(() => {
    new Chart(canvasRef.current, {
      type: "bar",
      data: { labels: ["A", "B"], datasets: [{ data: [10, 20] }] },
    });
  }, []);

  return <canvas ref={canvasRef} />;
}

                  
                

Examples of React Ref in Practice

Managing Focus in Forms

You can use refs to focus an input field when a user submits a form.

                  

                    jsx
                    
                      
                    
                  
                  

                    function Form() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Form submitted!");
    inputRef.current.focus();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" placeholder="Type here..." />
      <button type="submit">Submit</button>
    </form>
  );
}

                  
                

Persisting Values Without Causing Re-Renders

When tracking values across renders without updating the UI, use refs instead of state.

                  

                    jsx
                    
                      
                    
                  
                  

                    function Timer() {
  const count = useRef(0);

  useEffect(() => {
    const interval = setInterval(() => {
      count.current += 1;
      console.log("Seconds passed:", count.current);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Check the console for the timer.</p>;
}

                  
                

Handling Scroll Position

Refs can track scroll positions and help adjust UI behavior.

                  

                    jsx
                    
                      
                    
                  
                  

                    function ScrollComponent() {
  const divRef = useRef(null);

  const scrollToBottom = () => {
    divRef.current.scrollTop = divRef.current.scrollHeight;
  };

  return (
    <div>
      <div ref={divRef} style={{ height: "100px", overflowY: "scroll" }}>
        <p>Some long content...</p>
        <p>More content...</p>
      </div>
      <button onClick={scrollToBottom}>Scroll to Bottom</button>
    </div>
  );
}

                  
                

Learn More About React Ref

Forwarding Refs to Child Components

By default, refs do not work on custom components. If you want to pass a ref to a child component, use forwardRef().

                  

                    jsx
                    
                      
                    
                  
                  

                    import React, { forwardRef, useRef } from "react";

const CustomInput = forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

function Parent() {
  const inputRef = useRef(null);

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

                  
                

React Props vs. Ref

Props pass data between components and trigger re-renders when updated. Refs provide a way to reference an element without causing a re-render.

Use refs when you need to:

• Manage focus, animations, or measurements.
• Track component lifecycle events.
• Store mutable values across renders.

Use props when you need to:

• Pass data between components.
• Trigger updates in the UI.

Using Refs in Functional and Class Components

Functional components use useRef() to manage refs, while class components use React.createRef(). Both methods allow direct manipulation of elements but do not cause re-renders.