1

How does "qwik-react" convert a React component to a Qwik component? Does it simply make it compatible with Qwik or does it transform it into a true Qwik component? Is there any advantage for developers to build Qwik components and libraries?

For example, if I want to use Chakra UI as my UI kit, according to the Qwik website documentation, should I create a file named "chakra-ui-qwik" and export each component I want to use in the following manner:

import { qwikify$ } from '@builder.io/qwik-react';
import { Box, Container, Divider, Link, Text } from "@chakra-ui/react";

export const QBox = qwikify$(Box);
export const QContainer = qwikify$(Container);
export const QDivider = qwikify$(Divider);
export const QLink = qwikify$(Link);
export const QText = qwikify$(Text);

So there is no need for developers to develop @chakra-ui/qwik library and @chakra-ui/react is enough?

Komeil Mehranfar
  • 45
  • 1
  • 2
  • 13

1 Answers1

1

Here you can find UI libraries that allow you to use the Qwik optimizations. In fact, using react inside Qwik is possible, but losing some benefits that the framework offers you.

In the Qwik documentation, qwikify section you can find several information.

Extract from the documentation:

Using React components in Qwik is a great way to migrate your application to Qwik, but it's not a silver bullet, you will need to rewrite your components to take advantage of Qwik's features.

Don't abuse qwikify$() to build your application, as overusing will cause performance gains to be lost.

Giorgio Boa
  • 341
  • 4