{"record":{"id":"0d9dd5c67a2a4bd9","repo":"bvaughn/react-virtualized","slug":"cellmeasurer-registerchild-expects-to-be-passed-el","errorCode":null,"errorMessage":"CellMeasurer registerChild expects to be passed Element or null","messagePattern":"CellMeasurer registerChild expects to be passed Element or null","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"source/CellMeasurer/CellMeasurer.js","lineNumber":169,"sourceCode":"\n    if (\n      height !== cache.getHeight(rowIndex, columnIndex) ||\n      width !== cache.getWidth(rowIndex, columnIndex)\n    ) {\n      cache.set(rowIndex, columnIndex, width, height);\n\n      if (parent && typeof parent.recomputeGridSize === 'function') {\n        parent.recomputeGridSize({\n          columnIndex,\n          rowIndex,\n        });\n      }\n    }\n  };\n\n  _registerChild = element => {\n    if (element && !(element instanceof Element)) {\n      console.warn(\n        'CellMeasurer registerChild expects to be passed Element or null',\n      );\n    }\n    this._child.current = element;\n    if (element) {\n      this._maybeMeasureCell();\n    }\n  };\n}\n\n// Used for DEV mode warning check\nif (process.env.NODE_ENV !== 'production') {\n  CellMeasurer.__internalCellMeasurerFlag = true;\n}\n","sourceCodeStart":151,"sourceCodeEnd":184,"githubUrl":"https://github.com/bvaughn/react-virtualized/blob/c737715486f724586aee8870ebea1e9efb7b0bfe/source/CellMeasurer/CellMeasurer.js#L151-L184","documentation":"CellMeasurer's `_registerChild` warns when the registered child ref is neither a DOM Element nor null. CellMeasurer expects its child to render a real DOM node it can measure via `offsetWidth`/`offsetHeight`. A non-Element (e.g. a plain object, class instance, or component ref) means measurement cannot work, so the component emits a console warning instead of throwing.","triggerScenarios":"Passing a class component (which yields a class-instance ref, not an Element) as CellMeasurer's child; wrapping the child so the forwarded ref points at a non-DOM object; calling `registerChild()` manually with a non-Element value; using React 19 ref callbacks that return a cleanup function (the returned value is treated as a ref).","commonSituations":"Upgrading React so refs behave differently; wrapping a `<div>` in a custom HOC that doesn't forward refs to the DOM node; using a custom component directly inside CellMeasurer instead of a DOM element or forwardRef wrapper.","solutions":["Render a plain DOM element (e.g. a <div>) as the direct child of CellMeasurer.","If using a custom component, wrap it in React.forwardRef and attach the ref to the outer DOM element.","Ensure `registerChild` prop, if used manually, is only called with an Element or null.","On React 19, do not return a value from ref callbacks (return null/undefined, not a cleanup function) when used as a ref here."],"exampleFix":"// before\n<CellMeasurer ...>\n  <MyCustomCell row={row} />  // ref points to class instance\n</CellMeasurer>\n\n// after\nconst MyCustomCell = React.forwardRef((props, ref) => (\n  <div ref={ref}>...</div>\n));\n<CellMeasurer ...>\n  <MyCustomCell row={row} />\n</CellMeasurer>","handlingStrategy":"type-guard","validationCode":"function isDomEl(x) { return x === null || (typeof Element !== 'undefined' && x instanceof Element); }\n// assert before render: console.assert(isDomEl(childRef.current))","typeGuard":"const isElement = (x) => x === null || (typeof Element !== 'undefined' && x instanceof Element);","tryCatchPattern":null,"preventionTips":["Only put DOM elements or forwardRef components as CellMeasurer children","Never return a value from ref callbacks on React 19","Log ref values in dev to confirm they are Elements"],"tags":["react","ref","cellmeasurer","dom-element"],"backgroundTag":"ref-not-dom-element","analyzedSha":"c737715486f724586aee8870ebea1e9efb7b0bfe","analyzedAt":"2026-08-30T00:33:38.249Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}