--- title: Callback Refs in React | daily.dev description: Callback Refs are a way to set a ref to a function instead of directly to a DOM element. This function is called with the component instance or DOM element as... canonical: https://daily.dev/posts/callback-refs-in-react-pas1x7rmm twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Callback Refs in React | daily.dev og:description: Callback Refs are a way to set a ref to a function instead of directly to a DOM element. This function is called with the component instance or DOM element as... og:url: https://daily.dev/posts/callback-refs-in-react-pas1x7rmm og:image: https://api.daily.dev/og/posts/paS1X7rMM.png og:image:alt: Callback Refs in React og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Callback Refs in React **[Medium](https://daily.dev/sources/medium_js)** · 4 min read · 41 upvotes · 0 comments ## Summary Callback Refs are a way to set a ref to a function instead of directly to a DOM element. This function is called with the component instance or DOM element as its argument when the component is mounted or updated. Callback refs are particularly useful when you need to access properties or methods that are not directly available through props. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#dom](https://daily.dev/tags/dom) [View this post on daily.dev](https://daily.dev/posts/callback-refs-in-react-pas1x7rmm) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Callback Refs in React","url":"https://daily.dev/posts/callback-refs-in-react-pas1x7rmm","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/callback-refs-in-react-pas1x7rmm"},"datePublished":"2023-05-17T02:51:41.112Z","dateModified":"2023-07-20T14:10:56.027Z","description":"Callback Refs are a way to set a ref to a function instead of directly to a DOM element. This function is called with the component instance or DOM element as...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/092508710a191d1bc0672b6ec1fc363a?_a=AQADKdt","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/092508710a191d1bc0672b6ec1fc363a?_a=AQADKdt","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/callback-refs-in-react-pas1x7rmm","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":41},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,webdev,javascript,dom","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Callback Refs in React"}]} ```