NextLinkでComponentを囲ったら、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 Link.のエラーがでた

個人の備忘録です。

環境

• react: 17.0.2
• react-hook-form: 7.28.0
• next: 11.1.3
• chakra-ui: 1.8.5

やりたいこと

• chakra-ui の Link を component 化してラップして使いたい

エラーの再現

component

export const LinkComponent = ({ children, ...props }: LinkProps) => {
  return (
    <Link _focus={{ boxShadow: 'none' }} {...props}>
      {children}
    </Link>
  );
};

使用側

import NextLink from 'next/link';

<NextLink href={'/hoge'} passHref>
  <LinkComponent>一覧に戻る</MwLink>
</NextLink>

調査

• https://stackoverflow.com/questions/66421459/warning-function-components-cannot-be-given-refs
• https://github.com/vercel/next.js/issues/7915

公式

• https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component
• 公式には以下のように記述がありました

Linkの子がfunctional componentの場合、passHrefの使用に加えて、React.forwardRefでコンポーネントをラップする必要があります。

やったこと

• ref を使う
• ただ、以下の記述だと別のエラーが出る

import { forwardRef, LegacyRef } from 'react';
import { Link, LinkProps } from '@chakra-ui/react';

export const LinkComponent = forwardRef(function MwLinkFunction(
  { children, ...props }: LinkProps,
  ref
) {
  return (
    <Link
      _focus={{ boxShadow: 'none' }}
      {...props}
      ref={ref as LegacyRef<HTMLAnchorElement>}
    >
      {children}
    </Link>
  );
});

• 気にしなくても良いという記事も見受けられたが、解消したい

error

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at SearchSpecialistContainer

解決方法

• 以下で今までのエラーが出なくなった

import { Link, LinkProps } from '@chakra-ui/react';
import { forwardRef } from 'react';

const LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
  const { children, ...linkProps } = props;
  return (
    <Link _focus={{ boxShadow: 'none' }} {...linkProps} ref={ref}>
      <>{children}</>
    </Link>
  );
});

LinkComponent.displayName = 'LinkComponent';
export default LinkComponent;