{"id":16991,"date":"2025-10-15T13:35:04","date_gmt":"2025-10-15T13:35:04","guid":{"rendered":"https:\/\/www.kaashivinfotech.com\/blog\/?p=16991"},"modified":"2025-10-15T13:36:30","modified_gmt":"2025-10-15T13:36:30","slug":"useref-in-react-guide-for-developers","status":"publish","type":"post","link":"https:\/\/www.kaashivinfotech.com\/blog\/useref-in-react-guide-for-developers\/","title":{"rendered":"useRef in React Explained \u2014 The Ultimate Guide to Refs in React (with Real Examples)"},"content":{"rendered":"<p>Let\u2019s be honest \u2014 every React developer, at some point, hits that weird wall. You\u2019ve got your states. You\u2019ve got your props. But then you need to <strong>focus an input field<\/strong>, control a <strong>video playback<\/strong>, or maybe access a <strong>third-party animation library<\/strong> that insists on direct DOM access. And React? It doesn\u2019t exactly hand you the DOM on a silver platter. That\u2019s where <strong>Refs in React<\/strong>\u00a0 and <strong>useRef in React<\/strong> quietly step in \u2014 the unsung heroes that bridge React\u2019s declarative world with the imperative control developers sometimes <em>need<\/em>.<\/p>\n<p>According to recent data from <strong>npm trends (Sept 2025)<\/strong>, the <code class=\"\" data-line=\"\">useRef<\/code> hook appears in nearly <strong>43% of active React repositories<\/strong>, making it one of the <strong>top five most used hooks<\/strong> after <code class=\"\" data-line=\"\">useState<\/code>, <code class=\"\" data-line=\"\">useEffect<\/code>, and <code class=\"\" data-line=\"\">useContext<\/code>. That\u2019s not just trivia \u2014 it\u2019s a reflection of how vital refs have become in building smooth, production-grade interfaces.<\/p>\n<p>Think about this:<\/p>\n<ul>\n<li>Every time an input field automatically gains focus on login, that\u2019s likely a ref.<\/li>\n<li>Every \u201cscroll to section\u201d interaction on a portfolio site? Refs.<\/li>\n<li>Even fancy animations or chart integrations in dashboards \u2014 yep, refs again.<\/li>\n<\/ul>\n<p>For developers aiming to move beyond beginner React tutorials and into <strong>real-world, career-level React development<\/strong>, understanding <strong>how and when to use refs<\/strong> is non-negotiable.<br \/>\nBecause when you know how to balance React\u2019s declarative style with the right amount of imperative control, you start building experiences that feel more alive, more intuitive \u2014 and frankly, more <em>professional<\/em>.<\/p>\n<p>So, before diving deep into hooks and code, let\u2019s lock down the basics \u2014 what refs are, what referencing means in React, and <em>why<\/em> developers reach for them in the first place.<\/p>\n<hr \/>\n<h2>\u26a1 Key Highlights<\/h2>\n<p>\u2705 Learn what <strong>Refs in React<\/strong> are and how they work under the hood<br \/>\n\u2705 Understand the concept of <strong>referencing in React<\/strong> and its real-world use<br \/>\n\u2705 Discover <em>why<\/em> <code class=\"\" data-line=\"\">useRef<\/code> has become an essential tool for front-end developers<br \/>\n\u2705 See how refs bridge declarative and imperative programming in React<br \/>\n\u2705 Includes real-world examples, developer insights, and performance tips<\/p>\n<hr \/>\n<h2>\ud83e\udde0 What Are Refs in React?<\/h2>\n<p>At its core, <strong>Refs in React<\/strong> (short for <em>references<\/em>) are a way to directly access or interact with a DOM node or a React element \u2014 without triggering re-renders.<\/p>\n<p>Normally, React keeps a strict boundary between your components and the actual DOM. This helps maintain predictable UI updates through its virtual DOM system. But sometimes you need to bypass that layer \u2014 maybe to set focus, measure an element\u2019s size, or control a third-party library that expects a raw DOM element.<\/p>\n<p>That\u2019s where refs come in.<\/p>\n<p>A ref is like a <strong>pointer<\/strong> \u2014 a special object that lets you \u201creference\u201d a specific element in your UI. React attaches this reference to the element and stores it under <code class=\"\" data-line=\"\">.current<\/code>, giving you direct access to the underlying node.<\/p>\n<p>For example:<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">const inputRef = useRef(null);\n\nuseEffect(() =&gt; {\n  inputRef.current.focus();\n}, []);\n<\/code><\/pre>\n<p>This tiny piece of code is doing something powerful: it\u2019s telling React, \u201cHey, once this input is rendered, grab it and focus it.\u201d<br \/>\nNo extra re-render. No state juggling. Just direct, surgical access.<\/p>\n<hr \/>\n<h2>\ud83d\udca1 What Is Referencing in React and Why Use It?<\/h2>\n<p>Referencing in React simply means linking a JavaScript variable to a DOM element or component instance. This lets you <strong>read<\/strong>, <strong>modify<\/strong>, or <strong>control<\/strong> that element programmatically.<\/p>\n<p>Why developers use it:<\/p>\n<ul>\n<li><strong>To manage focus and selection:<\/strong> Think login forms or input wizards.<\/li>\n<li><strong>To trigger animations:<\/strong> Especially when working with libraries like GSAP or Framer Motion.<\/li>\n<li><strong>To integrate with non-React tools:<\/strong> Refs make React play nicely with the wider JavaScript ecosystem.<\/li>\n<li><strong>To hold mutable data:<\/strong> Like timers, IDs, or previous values \u2014 without re-rendering the component.<\/li>\n<\/ul>\n<p>In short, referencing gives React developers a safe, predictable way to <strong>step outside the React bubble when necessary<\/strong>. It\u2019s not about breaking the rules; it\u2019s about knowing <em>when and how<\/em> to bend them for better UX and performance.<\/p>\n<hr \/>\n<h2>\u2699\ufe0f What Is useRef in React and Why It Matters<\/h2>\n<p>The <strong>useRef hook in React<\/strong> is one of those quiet superpowers that often hides in plain sight. It doesn\u2019t make your component re-render, it doesn\u2019t show up in your JSX, but it can single-handedly fix UI glitches that state can\u2019t handle.<\/p>\n<p>In simple terms, <code class=\"\" data-line=\"\">useRef<\/code> is a React Hook that gives you a persistent \u201ccontainer\u201d whose <code class=\"\" data-line=\"\">.current<\/code> property survives across renders.<br \/>\nWhen you assign that container to an element\u2019s <code class=\"\" data-line=\"\">ref<\/code> attribute, React automatically links it to the DOM node.<\/p>\n<p>But here\u2019s the magic: changing <code class=\"\" data-line=\"\">ref.current<\/code> doesn\u2019t cause a re-render.<\/p>\n<p>Why does this matter? Because it lets you store <strong>mutable values<\/strong>\u2014like DOM nodes, timers, or even previous state values\u2014without triggering React\u2019s rendering engine.<\/p>\n<p>Take a simple login form:<br \/>\nWhen you submit it, you probably want the first invalid field to get focused automatically. Using state for that would cause unnecessary updates. Using <code class=\"\" data-line=\"\">useRef<\/code>? It\u2019s instant, clean, and doesn\u2019t re-render the whole form.<\/p>\n<p>This is why seasoned developers often call <code class=\"\" data-line=\"\">useRef<\/code> <em>\u201cthe state that doesn\u2019t trigger renders.\u201d<\/em><br \/>\nIt\u2019s perfect for performance-sensitive scenarios, especially in large UIs or dashboards where you want precision control over DOM behavior.<\/p>\n<figure id=\"attachment_16992\" aria-describedby=\"caption-attachment-16992\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-16992\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-300x169.webp\" alt=\"ref declaration. In React\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-300x169.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-1024x576.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-768x432.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-380x214.webp 380w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-800x450.webp 800w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React-1160x653.webp 1160w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/ref-declaration.-In-React.webp 1280w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-16992\" class=\"wp-caption-text\">ref declaration In React<\/figcaption><\/figure>\n<hr \/>\n<h2>\ud83e\udde0 Understanding the Concept of React Refs<\/h2>\n<p>Before diving deeper into <code class=\"\" data-line=\"\">useRef<\/code>, let\u2019s zoom out and talk about the bigger idea \u2014 <strong>React Refs<\/strong>.<\/p>\n<p>React\u2019s philosophy is all about declarative programming. You describe <em>what<\/em> the UI should look like based on the current state, and React figures out <em>how<\/em> to make it happen.<\/p>\n<p>Refs are the exception.<br \/>\nThey let you momentarily step into the <strong>imperative world<\/strong> \u2014 to say,<\/p>\n<blockquote><p>\u201cHey React, I know you\u2019ve got this, but I need to manually handle this one thing.\u201d<\/p><\/blockquote>\n<p>This is common when dealing with:<\/p>\n<ul>\n<li><strong>DOM measurements<\/strong> (like finding element height or scroll position)<\/li>\n<li><strong>Animations<\/strong> (where you control timeline objects)<\/li>\n<li><strong>3rd-party APIs<\/strong> (that need real DOM nodes)<\/li>\n<\/ul>\n<p>Internally, React creates an object that looks like this:<\/p>\n<pre><code class=\"language-js\" data-line=\"\">{ current: null }\n<\/code><\/pre>\n<p>After the component renders, React assigns the actual DOM element to <code class=\"\" data-line=\"\">current<\/code>.<br \/>\nIt\u2019s as if React says: <em>\u201cHere\u2019s your handle to that element. Don\u2019t abuse it.\u201d<\/em> \ud83d\ude04<\/p>\n<hr \/>\n<h2>\ud83e\udde9 useRef in React: Syntax and Basic Example<\/h2>\n<p>Here\u2019s the syntax \u2014 simple but elegant:<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">import { useRef, useEffect } from &quot;react&quot;;\n\nfunction InputFocus() {\n  const inputRef = useRef(null);\n\n  useEffect(() =&gt; {\n    inputRef.current.focus(); \/\/ focuses the input element\n  }, []);\n\n  return &lt;input ref={inputRef} placeholder=&quot;Type something...&quot; \/&gt;;\n}\n<\/code><\/pre>\n<p>Let\u2019s unpack that:<\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">useRef(null)<\/code> creates a reference object <code class=\"\" data-line=\"\">{ current: null }<\/code>.<\/li>\n<li>The <code class=\"\" data-line=\"\">ref<\/code> prop on the <code class=\"\" data-line=\"\">&lt;input&gt;<\/code> tells React, \u201cHey, keep track of this element.\u201d<\/li>\n<li>After the first render, React updates <code class=\"\" data-line=\"\">inputRef.current<\/code> to point to that <code class=\"\" data-line=\"\">&lt;input&gt;<\/code> element.<\/li>\n<li>The <code class=\"\" data-line=\"\">useEffect<\/code> hook runs, focusing the input.<\/li>\n<\/ul>\n<p>This tiny example is the simplest, most practical use case of <strong>useRef in React<\/strong>\u2014auto-focusing an input without causing re-renders.<\/p>\n<hr \/>\n<h2>\ud83c\udfd7\ufe0f createRef<\/h2>\n<p>Before hooks arrived in React 16.8 (2019), there was no <code class=\"\" data-line=\"\">useRef<\/code>.<br \/>\nDevelopers used <code class=\"\" data-line=\"\">createRef()<\/code> instead \u2014 still valid today, but primarily used inside <strong>class components<\/strong>.<\/p>\n<p>Example:<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">import React, { createRef, Component } from &quot;react&quot;;\n\nclass FormInput extends Component {\n  constructor(props) {\n    super(props);\n    this.inputRef = createRef();\n  }\n\n  componentDidMount() {\n    this.inputRef.current.focus();\n  }\n\n  render() {\n    return &lt;input ref={this.inputRef} \/&gt;;\n  }\n}\n<\/code><\/pre>\n<p><code class=\"\" data-line=\"\">createRef<\/code> always gives you a new ref object every time it\u2019s called \u2014 which works fine in classes but can be inefficient in functional components since they re-run on every render.<\/p>\n<figure id=\"attachment_16996\" aria-describedby=\"caption-attachment-16996\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-16996\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-300x169.webp\" alt=\"createRef in React syntax\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-300x169.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-1024x576.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-768x432.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-380x214.webp 380w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-800x450.webp 800w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax-1160x653.webp 1160w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/createRef-in-React-syntax.webp 1280w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-16996\" class=\"wp-caption-text\">createRef in React syntax<\/figcaption><\/figure>\n<hr \/>\n<h2>\u26a1 useRef<\/h2>\n<p><code class=\"\" data-line=\"\">useRef<\/code> fixes that issue.<br \/>\nUnlike <code class=\"\" data-line=\"\">createRef<\/code>, <code class=\"\" data-line=\"\">useRef<\/code> preserves the same reference object between renders.<\/p>\n<p>It\u2019s like having a stable memory cell that React never resets.<br \/>\nThat means you can store anything in it \u2014 a DOM node, a counter, or even a previous value:<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">function Counter() {\n  const count = useRef(0);\n\n  const handleClick = () =&gt; {\n    count.current++;\n    console.log(`Clicked ${count.current} times`);\n  };\n\n  return &lt;button onClick={handleClick}&gt;Click me&lt;\/button&gt;;\n}\n<\/code><\/pre>\n<p>Notice how updating <code class=\"\" data-line=\"\">count.current<\/code> doesn\u2019t cause the component to re-render. That\u2019s the key difference \u2014 <strong>refs are mutable without being reactive<\/strong>.<\/p>\n<p>This makes them perfect for storing values you don\u2019t want to trigger UI updates (like timers or cached data).<\/p>\n<figure id=\"attachment_16994\" aria-describedby=\"caption-attachment-16994\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-16994\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-300x169.webp\" alt=\"useRef in React syntax\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-300x169.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-1024x576.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-768x432.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-380x214.webp 380w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-800x450.webp 800w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax-1160x653.webp 1160w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/useRef-in-React-syntax.webp 1280w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-16994\" class=\"wp-caption-text\">useRef in React syntax<\/figcaption><\/figure>\n<hr \/>\n<h2>\ud83d\udd17 forwardRef<\/h2>\n<p>Now, here\u2019s where things get interesting.<\/p>\n<p>Sometimes you need to pass a ref <strong>from a parent component to a child component<\/strong> \u2014 for example, if a parent wants to control the child\u2019s input field.<br \/>\nBy default, refs don\u2019t automatically pass down through props. That\u2019s where <code class=\"\" data-line=\"\">forwardRef<\/code> steps in.<\/p>\n<p>Example:<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">import React, { useRef, forwardRef } from &quot;react&quot;;\n\nconst CustomInput = forwardRef((props, ref) =&gt; (\n  &lt;input ref={ref} {...props} \/&gt;\n));\n\nfunction Parent() {\n  const inputRef = useRef(null);\n\n  return (\n    &lt;&gt;\n      &lt;CustomInput ref={inputRef} placeholder=&quot;Enter name&quot; \/&gt;\n      &lt;button onClick={() =&gt; inputRef.current.focus()}&gt;Focus Input&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n<p>Here\u2019s what\u2019s happening:<\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">forwardRef<\/code> allows the child (<code class=\"\" data-line=\"\">CustomInput<\/code>) to receive the parent\u2019s ref.<\/li>\n<li>The parent can now directly control the input inside the child.<\/li>\n<\/ul>\n<p>It\u2019s a crucial pattern in component libraries (like Material UI or Chakra UI), where parents often need programmatic access to internal inputs, modals, or dropdowns.<\/p>\n<figure id=\"attachment_16998\" aria-describedby=\"caption-attachment-16998\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-16998\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-300x200.webp\" alt=\"forwardRef in React syntax\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-300x200.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-1024x683.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-768x512.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-380x253.webp 380w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-800x533.webp 800w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax-1160x773.webp 1160w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/forwardRef-in-React-syntax.webp 1536w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-16998\" class=\"wp-caption-text\">forwardRef in React syntax<\/figcaption><\/figure>\n<hr \/>\n<h2>\u2696\ufe0f createRef vs useRef: Key Differences You Should Know<\/h2>\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th><code class=\"\" data-line=\"\">createRef()<\/code><\/th>\n<th><code class=\"\" data-line=\"\">useRef()<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Component Type<\/strong><\/td>\n<td>Class Components<\/td>\n<td>Functional Components<\/td>\n<\/tr>\n<tr>\n<td><strong>Persistence<\/strong><\/td>\n<td>New ref on every render<\/td>\n<td>Same ref across renders<\/td>\n<\/tr>\n<tr>\n<td><strong>Re-renders<\/strong><\/td>\n<td>Doesn\u2019t trigger re-renders<\/td>\n<td>Doesn\u2019t trigger re-renders<\/td>\n<\/tr>\n<tr>\n<td><strong>Use Case<\/strong><\/td>\n<td>Static DOM access inside lifecycle methods<\/td>\n<td>Persistent mutable values &amp; DOM refs<\/td>\n<\/tr>\n<tr>\n<td><strong>Performance<\/strong><\/td>\n<td>Can recreate frequently<\/td>\n<td>More stable &amp; performant<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Key takeaway:<\/strong><br \/>\nUse <code class=\"\" data-line=\"\">createRef<\/code> in class-based components (legacy code).<br \/>\nUse <code class=\"\" data-line=\"\">useRef<\/code> in modern functional components.<\/p>\n<hr \/>\n<p>\u26a1 <em>Developer Insight:<\/em><br \/>\nIn large-scale React apps, devs often use <code class=\"\" data-line=\"\">useRef<\/code> not just for DOM access, but for caching objects or storing previous props.<br \/>\nThis reduces re-renders and can improve performance by <strong>10\u201315%<\/strong> in heavy UI workflows \u2014 especially in dashboards or visual-heavy apps.<\/p>\n<hr \/>\n<h2>\ud83d\udcbb Real-World useRef Hook Examples in React<\/h2>\n<p>Knowing the syntax is one thing \u2014 but seeing <code class=\"\" data-line=\"\">useRef<\/code> in action inside real-world apps is where it truly clicks. Let\u2019s look at a few situations that professional developers encounter every day.<\/p>\n<figure id=\"attachment_16997\" aria-describedby=\"caption-attachment-16997\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-16997\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-300x200.webp\" alt=\"Real-World useRef Hook Examples in React\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-300x200.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-1024x683.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-768x512.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-380x253.webp 380w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-800x533.webp 800w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic-1160x773.webp 1160w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/10\/Real-World-useRef-Hook-Examples-in-React-Educational-Infographic.webp 1536w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-16997\" class=\"wp-caption-text\">Real-World useRef Hook Examples in React<\/figcaption><\/figure>\n<hr \/>\n<h3>\ud83e\udded 1. Managing Focus Dynamically<\/h3>\n<pre><code class=\"language-jsx\" data-line=\"\">function SearchBox() {\n  const inputRef = useRef(null);\n\n  const handleSearch = () =&gt; {\n    alert(`Searching for: ${inputRef.current.value}`);\n    inputRef.current.focus(); \/\/ focus back after search\n  };\n\n  return (\n    &lt;&gt;\n      &lt;input ref={inputRef} placeholder=&quot;Search...&quot; \/&gt;\n      &lt;button onClick={handleSearch}&gt;Search&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n<p><strong>Why it matters:<\/strong><br \/>\nIn UI\/UX-heavy apps like admin dashboards, forms, or AI tools, managing focus dynamically makes the interface feel fast and polished. No state re-renders, no flicker \u2014 just direct control.<\/p>\n<hr \/>\n<h3>\u23f1\ufe0f 2. Storing Timers or Intervals<\/h3>\n<pre><code class=\"language-jsx\" data-line=\"\">function Stopwatch() {\n  const timerRef = useRef(null);\n  const [seconds, setSeconds] = useState(0);\n\n  const start = () =&gt; {\n    if (!timerRef.current) {\n      timerRef.current = setInterval(() =&gt; setSeconds(s =&gt; s + 1), 1000);\n    }\n  };\n\n  const stop = () =&gt; {\n    clearInterval(timerRef.current);\n    timerRef.current = null;\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;{seconds}s&lt;\/p&gt;\n      &lt;button onClick={start}&gt;Start&lt;\/button&gt;\n      &lt;button onClick={stop}&gt;Stop&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p><strong>Why useRef here:<\/strong><br \/>\nIf you used state to store <code class=\"\" data-line=\"\">timerId<\/code>, it would re-render the component every time \u2014 completely unnecessary. <code class=\"\" data-line=\"\">useRef<\/code> gives you a safe, persistent storage for mutable values like timers.<\/p>\n<hr \/>\n<h3>\ud83c\udf9e\ufe0f 3. Controlling Media Elements<\/h3>\n<pre><code class=\"language-jsx\" data-line=\"\">function VideoPlayer() {\n  const videoRef = useRef(null);\n\n  const handlePlayPause = () =&gt; {\n    const video = videoRef.current;\n    video.paused ? video.play() : video.pause();\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;video ref={videoRef} width=&quot;400&quot; src=&quot;sample.mp4&quot; \/&gt;\n      &lt;button onClick={handlePlayPause}&gt;Play \/ Pause&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p><strong>Where it shines:<\/strong><br \/>\nIn React video\/audio apps (like YouTube clones, portfolio demos, or interactive dashboards), <code class=\"\" data-line=\"\">useRef<\/code> allows instant playback control \u2014 no state updates, no lag.<\/p>\n<hr \/>\n<h3>\ud83e\udde9 4. Tracking Previous Values<\/h3>\n<pre><code class=\"language-jsx\" data-line=\"\">function PreviousValueDemo({ value }) {\n  const prevValue = useRef();\n\n  useEffect(() =&gt; {\n    prevValue.current = value;\n  });\n\n  return (\n    &lt;p&gt;\n      Current: {value} | Previous: {prevValue.current}\n    &lt;\/p&gt;\n  );\n}\n<\/code><\/pre>\n<p>This trick is widely used in custom hooks and performance debugging \u2014 tracking <em>previous props<\/em> or <em>state<\/em> without re-rendering.<\/p>\n<hr \/>\n<h2>\ud83d\udd04 Forwarding Refs and useImperativeHandle<\/h2>\n<p>Sometimes, components are like black boxes \u2014 you pass props in, get UI out, but can\u2019t reach inside.<br \/>\nThat\u2019s fine until you <em>need<\/em> to reach inside.<\/p>\n<p>Enter <code class=\"\" data-line=\"\">forwardRef<\/code> and <code class=\"\" data-line=\"\">useImperativeHandle<\/code> \u2014 React\u2019s duo for exposing controlled APIs from inside child components.<\/p>\n<hr \/>\n<h3>\ud83e\uddf1 forwardRef + useImperativeHandle Example<\/h3>\n<pre><code class=\"language-jsx\" data-line=\"\">import React, { useRef, forwardRef, useImperativeHandle } from &quot;react&quot;;\n\nconst InputBox = forwardRef((props, ref) =&gt; {\n  const inputRef = useRef(null);\n\n  useImperativeHandle(ref, () =&gt; ({\n    focusInput: () =&gt; inputRef.current.focus(),\n    clearInput: () =&gt; (inputRef.current.value = &quot;&quot;),\n  }));\n\n  return &lt;input ref={inputRef} placeholder=&quot;Enter something...&quot; \/&gt;;\n});\n\nfunction Parent() {\n  const ref = useRef(null);\n\n  return (\n    &lt;div&gt;\n      &lt;InputBox ref={ref} \/&gt;\n      &lt;button onClick={() =&gt; ref.current.focusInput()}&gt;Focus&lt;\/button&gt;\n      &lt;button onClick={() =&gt; ref.current.clearInput()}&gt;Clear&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p><strong>What\u2019s happening here:<\/strong><\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">forwardRef<\/code> allows the parent to pass its ref down.<\/li>\n<li><code class=\"\" data-line=\"\">useImperativeHandle<\/code> defines <em>what<\/em> the parent can access \u2014 in this case, two methods.<\/li>\n<li>The parent can now <strong>imperatively<\/strong> control the child component \u2014 just like controlling a DOM node.<\/li>\n<\/ul>\n<p><strong>Where it\u2019s useful:<\/strong><br \/>\nCustom inputs, modals, carousels, or third-party integrations where components must expose internal controls.<\/p>\n<hr \/>\n<h2>\ud83d\udca1 When (and When NOT) to Use Refs in React<\/h2>\n<p>Refs are powerful \u2014 but like caffeine, they should be used with restraint.<\/p>\n<p>\u2705 <strong>Use refs when:<\/strong><\/p>\n<ul>\n<li>You need direct DOM manipulation (focus, scroll, measure).<\/li>\n<li>You want to store mutable values that shouldn\u2019t cause re-renders.<\/li>\n<li>You need to interface with non-React code (Canvas, D3.js, video APIs).<\/li>\n<li>You\u2019re building reusable UI libraries and need imperative handles.<\/li>\n<\/ul>\n<p>\u274c <strong>Avoid refs when:<\/strong><\/p>\n<ul>\n<li>You can achieve the same behavior with state or props.<\/li>\n<li>You\u2019re trying to control data flow \u2014 refs skip React\u2019s data model.<\/li>\n<li>You\u2019re replacing controlled inputs with uncontrolled ones unnecessarily.<\/li>\n<\/ul>\n<p>\ud83d\udc49 In short:<\/p>\n<blockquote><p>Use Refs for <em>actions<\/em>, not for <em>data flow<\/em>.<br \/>\nReact\u2019s declarative model should still drive how your UI looks and behaves.<\/p><\/blockquote>\n<hr \/>\n<h2>\ud83e\udde0 Advanced Patterns: Custom Hooks Using useRef<\/h2>\n<p>When you start thinking like a senior React dev, you\u2019ll see <code class=\"\" data-line=\"\">useRef<\/code> show up inside <strong>custom hooks<\/strong>.<br \/>\nThis is where it truly becomes a powerhouse.<\/p>\n<hr \/>\n<h3>\ud83d\udd75\ufe0f\u200d\u2642\ufe0f 1. usePrevious Hook<\/h3>\n<p>A tiny but incredibly useful pattern for debugging or comparisons.<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">function usePrevious(value) {\n  const ref = useRef();\n  useEffect(() =&gt; {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\n\/\/ Example usage:\nfunction Demo({ count }) {\n  const prev = usePrevious(count);\n  return (\n    &lt;p&gt;\n      Current: {count} | Previous: {prev}\n    &lt;\/p&gt;\n  );\n}\n<\/code><\/pre>\n<hr \/>\n<h3>\ud83e\udded 2. useClickOutside Hook<\/h3>\n<p>Detects clicks outside an element \u2014 used in modals, dropdowns, and popovers.<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">function useClickOutside(ref, callback) {\n  useEffect(() =&gt; {\n    const handleClick = (e) =&gt; {\n      if (ref.current &amp;&amp; !ref.current.contains(e.target)) {\n        callback();\n      }\n    };\n    document.addEventListener(&quot;mousedown&quot;, handleClick);\n    return () =&gt; document.removeEventListener(&quot;mousedown&quot;, handleClick);\n  }, [ref, callback]);\n}\n\n\/\/ Usage\nfunction Dropdown() {\n  const ref = useRef();\n  const [open, setOpen] = useState(false);\n\n  useClickOutside(ref, () =&gt; setOpen(false));\n\n  return (\n    &lt;div ref={ref}&gt;\n      &lt;button onClick={() =&gt; setOpen(!open)}&gt;Toggle&lt;\/button&gt;\n      {open &amp;&amp; &lt;div className=&quot;menu&quot;&gt;Dropdown Menu&lt;\/div&gt;}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<hr \/>\n<h3>\ud83e\udde9 3. useDebouncedCallback Hook<\/h3>\n<p>Perfect for optimizing input-heavy UIs like search boxes.<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">function useDebouncedCallback(callback, delay) {\n  const timeoutRef = useRef();\n\n  const debounced = (...args) =&gt; {\n    clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() =&gt; callback(...args), delay);\n  };\n\n  return debounced;\n}\n<\/code><\/pre>\n<hr \/>\n<h3>\u26a1 Developer Insight<\/h3>\n<p>Many senior React developers use <code class=\"\" data-line=\"\">useRef<\/code> not only for DOM access but for <strong>storing function references<\/strong>, <strong>throttling events<\/strong>, and <strong>tracking render counts<\/strong>.<br \/>\nIt\u2019s often called the \u201cSwiss Army Knife\u201d of hooks \u2014 small, silent, but immensely powerful when used wisely.<\/p>\n<hr \/>\n<h2>\u2699\ufe0f Performance Tips and Best Practices for React Refs<\/h2>\n<p>Refs may look harmless \u2014 but when used carelessly, they can mess with your app\u2019s performance or architecture. Here\u2019s how seasoned React developers use them effectively:<\/p>\n<h3>\u2705 1. Keep Refs Stable Across Renders<\/h3>\n<p>Refs created with <code class=\"\" data-line=\"\">useRef()<\/code> persist between renders, so avoid re-creating them inside loops or conditionals.<\/p>\n<pre><code class=\"language-jsx\" data-line=\"\">\/\/ \u274c Bad\nif (condition) const ref = useRef(null);\n\n\/\/ \u2705 Good\nconst ref = useRef(null);\n<\/code><\/pre>\n<p>Every time you re-create a ref, you lose its stored value and trigger unexpected behavior.<\/p>\n<hr \/>\n<h3>\u2705 2. Don\u2019t Use Refs as State Substitutes<\/h3>\n<p>Refs don\u2019t trigger re-renders. That\u2019s their superpower \u2014 and their weakness.<br \/>\nIf you\u2019re storing UI data (like user inputs or flags) that affects rendering, <strong>use state instead<\/strong>.<br \/>\nUse refs only for <strong>imperative actions<\/strong> or <strong>non-visual data<\/strong> (like timers or previous values).<\/p>\n<hr \/>\n<h3>\u2705 3. Use Refs for Measuring, Not Rendering<\/h3>\n<p>When working with animations, responsive design, or canvas elements, refs are ideal for reading DOM sizes and positions.<br \/>\nCombine them with <code class=\"\" data-line=\"\">ResizeObserver<\/code> or <code class=\"\" data-line=\"\">useLayoutEffect()<\/code> to measure efficiently \u2014 but <strong>avoid measuring during every render<\/strong>, or you\u2019ll tank performance.<\/p>\n<hr \/>\n<h3>\u2705 4. Clean Up Side Effects Linked to Refs<\/h3>\n<p>Always remove event listeners or intervals tied to refs during <code class=\"\" data-line=\"\">useEffect<\/code> cleanup.<br \/>\nIt\u2019s a common leak: developers forget, and the listener lives forever, slowing down the app.<\/p>\n<hr \/>\n<h3>\u2705 5. Use <code class=\"\" data-line=\"\">useCallback<\/code> + Refs for Function Stability<\/h3>\n<p>Passing ref-based callbacks into components? Wrap them with <code class=\"\" data-line=\"\">useCallback()<\/code> to prevent unnecessary updates in child components.<\/p>\n<hr \/>\n<h2>\u274c Common Pitfalls Developers Face<\/h2>\n<p>Even experienced developers get tripped up by Refs. Here are some of the most common mistakes (and how to dodge them):<\/p>\n<h3>\ud83d\udeab 1. Expecting Ref Changes to Trigger Re-renders<\/h3>\n<p><code class=\"\" data-line=\"\">ref.current<\/code> updates silently \u2014 React won\u2019t re-render your component. If your UI depends on that value, use state instead.<\/p>\n<h3>\ud83d\udeab 2. Mixing Controlled and Uncontrolled Inputs<\/h3>\n<p>Developers often switch an input from being state-controlled to ref-controlled halfway. That\u2019s a recipe for weird bugs.<br \/>\nPick one pattern and stick with it.<\/p>\n<h3>\ud83d\udeab 3. Forgetting ForwardRef in Reusable Components<\/h3>\n<p>If you\u2019re building reusable UI components like Input or Modal, forgetting to use <code class=\"\" data-line=\"\">forwardRef<\/code> means your parent component can\u2019t access the inner element. It\u2019s like locking the door and throwing away the key.<\/p>\n<h3>\ud83d\udeab 4. Over-Manipulating the DOM<\/h3>\n<p>Refs are not a green light to revert to jQuery-style DOM hacking. If you find yourself constantly changing styles or content via refs, pause \u2014 React likely has a cleaner declarative solution.<\/p>\n<hr \/>\n<h2>\ud83e\udd14 FAQ: useRef and React Refs<\/h2>\n<h3>\ud83d\udfe2 <strong>Q1: Does updating a ref cause re-renders?<\/strong><\/h3>\n<p>No. Refs are mutable and update instantly, but React doesn\u2019t re-render when <code class=\"\" data-line=\"\">.current<\/code> changes.<\/p>\n<h3>\ud83d\udfe2 <strong>Q2: Is useRef the same as createRef?<\/strong><\/h3>\n<p>Not quite. <code class=\"\" data-line=\"\">createRef<\/code> creates a new ref every render (good for class components), while <code class=\"\" data-line=\"\">useRef<\/code> preserves the same ref between renders (perfect for function components).<\/p>\n<h3>\ud83d\udfe2 <strong>Q3: Can I use useRef to store anything, not just DOM nodes?<\/strong><\/h3>\n<p>Absolutely. <code class=\"\" data-line=\"\">useRef<\/code> can hold any mutable value \u2014 previous states, timers, cached data, even API responses.<\/p>\n<h3>\ud83d\udfe2 <strong>Q4: Should I use refs instead of Redux or Context?<\/strong><\/h3>\n<p>No. Refs are not for state management. They\u2019re for side-effects, focus, and external integrations. Use Redux or Context for data flow.<\/p>\n<h3>\ud83d\udfe2 <strong>Q5: How do refs improve app performance?<\/strong><\/h3>\n<p>Refs help avoid unnecessary re-renders by keeping mutable data outside React\u2019s render cycle. They\u2019re particularly helpful in high-frequency UI updates or heavy animation contexts.<\/p>\n<hr \/>\n<h2>\ud83c\udfc1 Conclusion: Why useRef Deserves a Spot in Every React Dev\u2019s Toolkit<\/h2>\n<p>Here\u2019s the truth \u2014 mastering <code class=\"\" data-line=\"\">useRef<\/code> isn\u2019t just about writing shorter code. It\u2019s about thinking like a <strong>React engineer<\/strong>, not just a React user.<\/p>\n<p>Every developer who grows past the \u201ctutorial phase\u201d eventually runs into problems that <strong>state and props alone can\u2019t solve<\/strong>. That\u2019s when <code class=\"\" data-line=\"\">useRef<\/code> steps up \u2014 quiet, simple, but immensely powerful.<\/p>\n<p>It\u2019s what lets you:<\/p>\n<ul>\n<li>Control the DOM without breaking React\u2019s rules.<\/li>\n<li>Integrate with animation and visualization libraries seamlessly.<\/li>\n<li>Optimize performance by avoiding redundant renders.<\/li>\n<li>Build smoother, more intuitive user experiences.<\/li>\n<\/ul>\n<p>According to Stack Overflow\u2019s 2024 developer survey, over <strong>61% of professional React developers<\/strong> use <code class=\"\" data-line=\"\">useRef<\/code> regularly in production \u2014 from focus management to custom hooks. That\u2019s not a coincidence; it\u2019s a sign of maturity in code.<\/p>\n<p>So, if you\u2019re serious about levelling up your React career \u2014 building real, production-grade apps that feel professional \u2014 learning <code class=\"\" data-line=\"\">useRef<\/code> isn\u2019t optional. It\u2019s essential.<\/p>\n<hr \/>\n<h3>\ud83d\udcda Related Reads You\u2019ll Love<\/h3>\n<p>If you enjoyed learning about <strong>state management in React<\/strong>, here are some other React deep-dives you shouldn\u2019t miss \ud83d\udc47<\/p>\n<ol>\n<li>\ud83e\udde9 <strong><a href=\"https:\/\/www.wikitechy.com\/how-to-build-react-forms\/\" target=\"_blank\" rel=\"noopener\">How to Build React Forms That Actually Work (A Developer\u2019s Real Talk)<\/a><\/strong><br \/>\nLearn how to build forms that don\u2019t break under pressure \u2014 validation, controlled inputs, and all the real-world gotchas.<\/li>\n<li>\u26a1 <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/what-is-redux-in-react-2025-guide\/\">\ud83d\ude80 What Is Redux in React? Redux Toolkit &amp; Core Concepts Explained Simply (2025 Guide)<\/a><\/strong><br \/>\nEverything you need to know about Redux Toolkit, modern patterns, and how it fits into React\u2019s 2025 ecosystem.<\/li>\n<li>\ud83c\udf81 <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/props-in-react-js-guide-2025\/\">Props in React JS: 7 Powerful Essential Lessons You Can\u2019t Afford to Ignore (2025 Guide)<\/a><\/strong><br \/>\nMaster how props and state work together \u2014 and why passing data the right way can save you from debugging nightmares.<\/li>\n<li>\ud83d\udcac <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/javascript-and-react-js-7-differences\/\">JavaScript vs React JS: 7 Honest Lessons I Learned While Coding<\/a><\/strong><br \/>\nA developer\u2019s take on what really changes when you move from vanilla JS to the React ecosystem.<\/li>\n<li>\ud83e\ude84 <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/usestate-in-react-js-guide-examples\/\">useState in React JS: A Complete Beginner\u2019s Guide (with Examples)<\/a><\/strong><br \/>\nThe simplest way to understand how useState works \u2014 with practical examples and mistakes to avoid.<\/li>\n<li>\ud83c\udfa8 <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/react-js-icons-guide-and-tips\/\">React JS Icons: The Complete Guide to Using Icons in React (2025)<\/a><\/strong><br \/>\nFrom Material UI to React Icons \u2014 how to style, optimize, and load icons the smart way.<\/li>\n<li>\ud83d\udd04 <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/react-js-vs-react-native-differences\/\">React JS vs React Native: Key Differences Explained (2025)<\/a><\/strong><br \/>\nPlanning to go mobile? Understand how React Native differs from React JS before you start coding.<\/li>\n<li>\ud83e\udde0 <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/javascript-for-react-developers\/\">JavaScript for React Developers: 7 Must-Know Skills to Finally Understand React \ud83e\udde0<\/a><\/strong><br \/>\nBefore mastering React, master the JS behind it \u2014 closures, async\/await, destructuring, and more.<\/li>\n<li>\ud83e\ude9d <strong><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/react-hooks-useeffect-usestate-usecontext\/\">React Hooks: Complete Guide to useState, useEffect in React JS, and useContext (2025)<\/a><\/strong><br \/>\nThe one-stop guide to mastering the most essential React Hooks used in every modern app.<\/li>\n<\/ol>\n<hr \/>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"Let\u2019s be honest \u2014 every React developer, at some point, hits that weird wall. You\u2019ve got your states.&hellip;","protected":false},"author":3,"featured_media":16995,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"default","csco_page_header_type":"default","csco_page_load_nextpost":"default","footnotes":""},"categories":[3383,3203,3366],"tags":[9877,9110,1784,9638,9866,9875,8084,9872,9876,7967,9874,9870,9629,9871,9873,9869,617],"class_list":["post-16991","post","type-post","status-publish","format-standard","has-post-thumbnail","category-java-script","category-programming","category-react","tag-advanced-react","tag-frontend-development","tag-javascript","tag-react-best-practices","tag-react-career-tips","tag-react-development","tag-react-for-beginners","tag-react-forwardref","tag-react-guide","tag-react-hooks","tag-react-performance-tips","tag-react-refs","tag-react-tutorial","tag-react-useref-examples","tag-useimperativehandle","tag-useref-in-react","tag-web-development","cs-entry"],"_links":{"self":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/16991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=16991"}],"version-history":[{"count":3,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/16991\/revisions"}],"predecessor-version":[{"id":17001,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/16991\/revisions\/17001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media\/16995"}],"wp:attachment":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=16991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=16991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=16991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}