{"id":12094,"date":"2025-04-15T06:40:03","date_gmt":"2025-04-15T06:40:03","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12094"},"modified":"2025-04-15T06:40:03","modified_gmt":"2025-04-15T06:40:03","slug":"useref-in-react","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/useref-in-react","title":{"rendered":"What is useRef for?"},"content":{"rendered":"

What is useRef?<\/h2>\n

The useRef is a hook that allows us to persist values across renders without causing a re-render when the value changes. It\u2019s commonly used for two main purposes:<\/p>\n

Accessing DOM Elements: We can use useRef to store a reference to a DOM element and directly interact with it (e.g., focusing an input field).<\/p>\n

Persisting Mutable Values: We can store values (like flags or previous state) that we want to persist across renders, but without triggering a re-render when they change.
\nThe value we store in useRef is accessible through ref.current.<\/p>\n

Syntax:<\/h2>\n

const myRef = useRef(initialValue);<\/code><\/p>\n

initialValue: This is the initial value we want to assign to the ref (it can be any data type: object, array, number, etc.).<\/p>\n

myRef.current: We access the actual value using .current<\/p>\n

A Quick Comparison: useState vs. useRef:<\/h3>\n

useState:<\/strong> Triggers a re-render when the state value changes.
\nuseRef:<\/strong> Does not trigger a re-render when the value changes.<\/p>\n

Code 1 Explanation:<\/h2>\n
export default function useIsMountedRef() {\r\n  const isMounted = useRef(true);\r\n  useEffect(\r\n    () => () => {\r\n      isMounted.current = false;\r\n    },\r\n    []\r\n  );\r\n  return isMounted;\r\n}<\/pre>\n
What\u2019s happening here?<\/h3>\n
useRef(true) initializes isMounted with the value true.
\n-> isMounted.current = true means the component is mounted when the component first renders.<\/p>\n
Inside<\/strong> useEffect, the cleanup function (() => { isMounted.current = false; }) sets isMounted.current to false when the component unmounts (because useEffect with an empty dependency array [] only runs once \u2014 after the initial mount and cleanup on unmount).<\/p>\n
So, useRef(true) tracks whether the component is mounted:
\nIt starts with true (mounted).
\nOnce the component unmounts, it sets the value to false.<\/p>\n
Why use useRef here?<\/h3>\n
If we\u2019re doing something asynchronous, like an API call, and we want to avoid updating state or doing something after the component has unmounted (because that could lead to errors), we can check if the component is still mounted using this ref.<\/p>\n
What is the difference between useRef(true) and useRef(false)?<\/h3>\n
    \n
  • useRef(true) means the component is initially considered “mounted.”<\/li>\n
  • useRef(false) would mean the component is initially considered “unmounted,” which could be useful to track something else from the beginning.<\/li>\n<\/ul>\n
    Code 2 Explanation:<\/h2>\n
    const mounted = useRef(false);\r\nuseEffect(() => {\r\n  if (!mounted.current) {\r\n    mounted.current = true;\r\n  } else {\r\n    \/\/ code\r\n  }\r\n}, [dependency]);\r\n<\/pre>\n
    What\u2019s happening here?<\/h3>\n
    useRef(false) initializes the mounted ref to false. This is tracking whether the effect has run before.<\/p>\n
    Inside the <\/span>useEffect<\/span>:<\/span><\/p>\n
      \n
    • On the first render, <\/span>mounted.current<\/span> is <\/span>false<\/span>, so the first block (<\/span>mounted.current = true<\/span>) will execute, updating the <\/span>mounted<\/span> ref to <\/span>true<\/span>.<\/span><\/li>\n
    • On subsequent renders (or when <\/span>dependency<\/span> changes), <\/span>mounted.current<\/span> will be <\/span>true<\/span>, and it will enter the <\/span>else<\/span> block.<\/span><\/li>\n<\/ul>\n
      Why use useRef here?<\/h3>\n
      This pattern can be useful for skipping certain code on the first render (like an initialization phase) and only running it on subsequent renders.<\/span><\/p>\n
      For example:<\/strong><\/p>\n
        \n
      • The first time the component renders, we set <\/span>mounted.current = true<\/span> to signal that we\u2019ve seen the component.<\/span><\/li>\n
      • On subsequent renders (when mounted.current<\/span> is <\/span>true<\/span>), we can run our logic inside the <\/span>else<\/span> block.<\/span><\/li>\n<\/ul>\n
        Summary:<\/h2>\n
        useRef keeps a mutable value across renders, but it doesn\u2019t cause re-renders when that value changes.<\/p>\n
        In code 1,<\/strong> it tracks whether a component is mounted or not.<\/p>\n
        In code 2<\/strong>, it tracks whether the effect has already run once, allowing us to skip code on the first render.<\/p>\n","protected":false},"excerpt":{"rendered":"
        What is useRef? The useRef is a hook that allows us to persist values across renders without causing a re-render when the value changes. It\u2019s commonly used for two main purposes: Accessing DOM Elements: We can use useRef to store a reference to a DOM element and directly interact with it (e.g., focusing an input […]<\/p>\n","protected":false},"author":1,"featured_media":12095,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12094"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12094"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12094\/revisions"}],"predecessor-version":[{"id":12096,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12094\/revisions\/12096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12095"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}