{"record":{"id":"194b740925ee8ce5","repo":"facebook/react","slug":"379","errorCode":"379","errorMessage":"Refs cannot be used in Server Components, nor passed to Client Components.","messagePattern":"Refs cannot be used in Server Components, nor passed to Client Components\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFlightServer.js","lineNumber":2337,"sourceCode":"  }\n}\n\nfunction renderElement(\n  request: Request,\n  task: Task,\n  type: any,\n  key: ReactKey,\n  ref: mixed,\n  props: any,\n  validated: number, // DEV only\n): ReactJSONValue {\n  if (ref !== null && ref !== undefined) {\n    // When the ref moves to the regular props object this will implicitly\n    // throw for functions. We could probably relax it to a DEV warning for other\n    // cases.\n    // TODO: `ref` is now just a prop when `enableRefAsProp` is on. Should we\n    // do what the above comment says?\n    throw new Error(\n      'Refs cannot be used in Server Components, nor passed to Client Components.',\n    );\n  }\n  if (__DEV__) {\n    jsxPropsParents.set(props, type);\n    if (typeof props.children === 'object' && props.children !== null) {\n      jsxChildrenParents.set(props.children, type);\n    }\n  }\n  if (\n    typeof type === 'function' &&\n    !isClientReference(type) &&\n    !isOpaqueTemporaryReference(type)\n  ) {\n    // This is a Server Component.\n    return renderFunctionComponent(request, task, key, type, props, validated);\n  } else if (type === REACT_FRAGMENT_TYPE && key === null) {\n    // For key-less fragments, we add a small optimization to avoid serializing","sourceCodeStart":2319,"sourceCodeEnd":2355,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightServer.js#L2319-L2355","documentation":"While serializing RSC output, React found a non-null ref on an element rendered by a Server Component or passed toward a Client Component. Refs are live, mutable handles bound to client-side instances, so there is no wire format for them across the RSC boundary. React hard-throws instead of silently dropping the ref, because silent loss would corrupt any code that relies on it.","triggerScenarios":"Rendering <SomeComponent ref={r}/> inside a Server Component tree; passing an element that carries ref as a prop value into a Client Component; libraries injecting refs via cloneElement in server-rendered layout code.","commonSituations":"Trying to use useRef in a shared component that ends up in the server graph; forwarding refs through a component not marked 'use client'; design-system components imported into a server tree.","solutions":["Move the ref-consuming logic into a file marked 'use client' and reference that component instead.","Restructure so the server passes plain data and the client component owns its own refs.","If a handle must cross, pass an id/string prop and let the client resolve the node itself."],"exampleFix":"// before — Server Component\n<ClientInput ref={inputRef} defaultValue=\"hi\" />\n\n// after — the ref lives in the client file\n// Input.client.tsx\n'use client';\nexport function ClientInput(props) {\n  const ref = useRef(null);\n  return <input ref={ref} {...props} />;\n}\n// Server Component\n<ClientInput defaultValue=\"hi\" />","handlingStrategy":"type-guard","validationCode":"// DEV-time walk: catch ref-carrying elements before render does.\nconst hasRef = (el: any) =>\n  el != null && typeof el === 'object' && typeof el.$$typeof === 'symbol' && el.ref != null;\nexport function assertNoRefs(props: Record<string, unknown>) {\n  for (const [k, v] of Object.entries(props)) {\n    if (hasRef(v)) throw new Error(`prop ${k} is an element carrying a ref — move ref usage to a client component`);\n  }\n}","typeGuard":"export function elementHasRef(el: unknown): boolean {\n  return typeof el === 'object' && el !== null && 'ref' in el && (el as any).ref != null;\n}","tryCatchPattern":null,"preventionTips":["Mark ref-using components 'use client' at the file level.","Never accept a ref prop in components shared between server and client trees.","Lint for useRef/forwardRef usage in files without 'use client'."],"tags":["refs","server-components","serialization","props"],"backgroundTag":"refs-in-server-components","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}