Troubleshooting memo call React+Typescript

Question

I need your help. Started learning Typescript recently and got one problem with React. I try to wrap my Router with React.memo(). Smth like this:

export const Router = React.memo<RouterPropsInterface>(({ isAuth }) => {

  if (!isAuth) {
      return (
          <Suspense fallback={<Loader text={""}/>}>
              <Routes>
                  <Route path={'/'} element={<LoginPage/>}/>
                  <Route path={'*'} element={<LoginPage/>}/>
                  <Route path={'register'} element={<RegisterPage/>}/>
              </Routes>
          </Suspense>
      )
  }

  return (
      <Suspense fallback={<Loader text={""}/>}>
          <Routes>
              <Route path={'create'} element={<AddCard/>}/>
              <Route path={'posts'} element={<UsersList/>}/>
              <Route path={'/'} element={<Home/>}/>
              <Route path={"*"} element={<Home/>}/>
          </Routes>
      </Suspense>

  )
});

My RouterPropsInterface looks like this:

export interface RouterPropsInterface {
    isAuth: boolean,
}

But in that case, I have other problems:

src/routers/Router.tsx
  Line 12:23:  Component definition is missing display name  react/display-name
  Line 12:59:  'isAuth' is missing in props validation       react/prop-types

"react": "^17.0.2", "typescript": "^4.6.2"

I don't want to add eslint-disablers, just wanna understand what I'm doing wrong.

Thanks!

Answer 1

When wrapping a component with React.memo, the displayName property is no longer inferred by React. So, you need to set it like so.

export const Router = React.memo(({ isAuth }) => {...}
Router.displayName = "Router"

Regarding prop types, you can satisfy this by adding prop types like so:

export const Router = React.memo(({ isAuth }: {isAuth: RouterPropsInterface }) => {...}