Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
What I tried to do
After creating signup form for registering new user, I created custom <Input />
component separately
in which users can type their information for signing up.
Then, I tried to use watch()
(opens in a new tab) method in react-hook-form
package
to see what users wrote down for their inputs.
What I actually tried
Signup Form
Input
Component
Error that I got
I got the following error in my browser console.
Warning: Function components cannot be given refs.Attempts to access this ref will fail. Did you mean to use React.forwardRef()?Check the render method of `CreateAccount`. at Input (webpack-internal:///(app-pages-browser)/./src/components/input/Input.tsx:22:11) at div at div at form at div at section at CreateAccount (webpack-internal:///(app-pages-browser)/./src/app/create-account/page.tsx:25:76) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:229:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:326:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/error-boundary.js:110:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:215:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:336:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:229:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/not-found-boundary.js:54:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:326:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/error-boundary.js:110:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:215:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/layout-router.js:336:11) at div at body at html at RootLayout (webpack-internal:///(app-pages-browser)/./src/app/layout.tsx:21:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/not-found-boundary.js:54:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/app-router.js:147:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/error-boundary.js:82:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/error-boundary.js:110:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/components/app-router.js:396:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/app-index.js:123:11) at RSCComponent at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.16_react-dom@18.2.0_react@18.2.0_sass@1.64.0/node_modules/next/dist/client/app-index.js:139:11)
Referrence: bobbyhadz.com
Package version
"dependencies": { "@prisma/client": "^5.1.1", "@types/node": "20.4.2", "@types/react": "18.2.15", "@types/react-dom": "18.2.7", "eslint": "8.45.0", "eslint-config-next": "13.4.11", "next": "^13.4.16", "ra-data-json-server": "^4.13.0", "react": "18.2.0", "react-admin": "4.10", "react-dom": "18.2.0", "react-hook-form": "^7.45.4", "typescript": "5.1.6", "yup": "^1.2.0" },
Solution
According to the answer in Stackoverflow (opens in a new tab),
I need to wrap <Input />
component with forwardRef
(opens in a new tab).
forwardRef
lets child component expose DOM node to its parent component with ref
(opens in a new tab).
As functional component does not have instances unlike class component and JSX element1.
Therefore, I changed my <Input />
component as follows.