Using React.VFC Instead of React.FC

When we Type React functional components, it is better to use React.VoidFunctionComponent (React.VFC) instead of React.FC. React.FC always includes the children prop on your component whether you want or not. We can get around this by adding children?: never on your custom prop. However, it is much cleaner to use React.VFC and type children explicitly.

If you are using old react type, you might need to upgrade @types/react to ^16.9.53. Note that React.VFC was introduced in @types/react@16.9.48.

If you have type conflicts caused by different version dependencies in old packages, we can always add resolutions to package.json.

"resolutions": {
  "react": "16.13.1",
  "@types/react": "^16.9.53",
},

See further information on React.VFC here.

UPDATE

Since the release of React 18, React.FC no longer includes implicit children and React.VFC is deprecated. We should move away from them (Moving away from React.FC and React.VFC).

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …