ChangelogMakerkit upgraded to React 18

React 18 has been released, and with it many exciting features.

·2 min read
Cover Image for Makerkit upgraded to React 18

The React Team has finally released React 18 after a long and "suspensful" time.

Developers have long awaited this feature-packed release, which takes Suspense and Concurrent Rendering out of beta, and are now stable for developers to use.

Fortunately, the API has remained relatively stable, except for two main changes:

  • the React.FC interface has changed, and the children property is no longer part of it; this means that we had to apply a different interface to most components
  • the hook useEffect now runs twice to spot memory leaks

Makerkit is now compatible with the changes above, and you can use it with React 18 for developing your next SaaS.

Introducing React.FCC

As someone who quite liked the React.FC interface, I was slightly bummed by the decision to change it.

As a result, I introduced a new interface, which reflects the old React.FC:

declare module 'react' {
  type FCC<Props = Record<string, unknown>> = React.FC<React.PropsWithChildren<Props>>;

const MyComponentWithChildren: React.FCC<{
    body: string;
}> = ({ body, children }) => {

It can be read as React Functional Component with Children.

What about Suspense?

While Suspense is now stable, Makerkit hasn't yet adopted it, but it's very high on our list before our final version is out.

Packages Update

Nearly all the packages got a version bump:

  • Pino was updated to the recently released version 8
  • Stripe as update to version 9.6.0
  • Cypress was updated to version 10
  • Many, many minor bumps to all the packages

We're working hard towards a stable release. Stay tuned :)

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updates

Read more about

Cover Image for Get paid with Stripe

Get paid with Stripe

·2 min read

MakerKit makes it super-easy to add Stripe payment and subscriptions to your Firebase and Next.js application. Learn how!