DEV Community

Cover image for useRef() in React . . .
_Khojiakbar_
_Khojiakbar_

Posted on

useRef() in React . . .

The Magical Mirror: Understanding useRef

Imagine you have a magical mirror. This mirror can remember a special spot in your room. Whenever you look into the mirror, it points to that exact spot, even if you move things around in your room.

In React, useRef is like this magical mirror. It helps you keep track of a special spot (or reference) in your code.

The Story of Timmy and His Toy Box

Meet Timmy

Timmy loves playing with his toys. He has a magical toy box where he keeps all his toys. One day, Timmy decides he wants to remember where his favorite toy robot is, even if he adds more toys to the box or moves them around.

Timmy's Magical Marker: useRef

Timmy uses a magical marker (like useRef) to mark the spot where his toy robot is in the toy box. No matter how many toys he adds or how much he moves them, the magical marker always knows where the toy robot is.

How useRef Works in Code

Let's see how Timmy's magical marker works in React:

Funny Sample with Timmy

The Robot Naming Game

Timmy wants to give his robot a name. He uses useRef to remember what he named it, even if he forgets!

import React, { useRef } from 'react';

function RobotNaming() {
  const robotNameRef = useRef(null);

  const nameRobot = () => {
    alert(`The robot's name is: ${robotNameRef.current.value}`);
  };

  return (
    <div>
      <input type="text" ref={robotNameRef} placeholder="Name the Robot" />
      <button onClick={nameRobot}>Name Robot</button>
    </div>
  );
}

export default RobotNaming;
Enter fullscreen mode Exit fullscreen mode

Summary

Timmy's magical marker, the useRef hook, helps him keep track of his favorite toy robot's spot, even if things change in his toy box. Similarly, useRef in React helps you keep track of references to DOM elements or other values without causing the component to re-render. It's like having a magical marker that always knows where your important stuff is!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay