Moving away from React.FC and React.VFC

Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more.

See this pull request. It states:

Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff".

As React evolves, using VFC instead of FC is no longer relevant.

Now that we think about it, using FC or VFC was not a good idea from the beginning. Typing the argument instead of typing the function itself is more future-proof because the type of function can change in the React API as it happened for the React 18 update.

We really should be typing the argument for the react component. This means instead of typing the function.

const MyComponent: React.VFC = ({
  prop1,
  prop2,
  prop3,
}) => (
  ...
)

We should be typing the argument.

const MyComponent = ({
  prop1,
  prop2,
  prop3,
  children,
}: MyComponentProps) => (
  ...
)
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 …