# Qwik SDK - Registering Custom Components in Custom Sections

**URL:** <https://forum.builder.io/t/qwik-sdk-registering-custom-components-in-custom-sections/6725>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, custom-components, sdk-qwik, register, insert-menu\
**Created:** [November 6, 2024, 4:17pm UTC](https://forum.builder.io/t/qwik-sdk-registering-custom-components-in-custom-sections/6725 "2024-11-06T16:17:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 6, 2024, 4:17pm UTC](https://forum.builder.io/t/qwik-sdk-registering-custom-components-in-custom-sections/6725/1 "2024-11-06T16:17:38Z")

</div>

**Handling `register()` in Qwik: Use Inside `useVisibleTask$` for Better Performance**

When using Qwik (especially in combination with `@builder.io/sdk-qwik`), you may run into an issue when you try to call `register()` outside of `useVisibleTask$()` in the module scope. This is similar to how React allows you to invoke certain functions at the module level.

However, in Qwik, this approach **doesn’t work** as expected. You **must** wrap the `register()` call inside `useVisibleTask$()` instead. The reason is that Qwik avoids running component code in the browser unless it is explicitly instructed to do so. Adding the `register()` call inside of the `useVisibleTask$()` instructs Qwik to run it in the browser, which is necessary for it to work properly.

Here’s a working example:

```auto
import { component$, useVisibleTask$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import {
  Content,
  fetchOneEntry,
  getBuilderSearchParams,
  register,
} from '@builder.io/sdk-qwik';

const Counter = component$(() => {
  return <div>Counter</div>;
});

const customComponents = [
  {
    name: 'Counter',
    component: Counter,
  },
];

export default component$(() => {
  const content = /**/

  useVisibleTask$(() => {
    register('insertMenu', {
      name: 'Our special components',
      items: [{ name: 'Counter' }],
    });
  });

  return (
    <Content
      model={BUILDER_MODEL}
      content={content.value}
      apiKey={BUILDER_PUBLIC_API_KEY}
      customComponents={customComponents}
    />
  );
});

```

Thanks,

---

<div class="post-metadata">

**Author:** ![qiqi331](https://avatars.discourse-cdn.com/v4/letter/q/dec6dc/32.png) [@qiqi331](https://forum.builder.io/u/qiqi331)\
**Post date:** [November 7, 2024, 11:08am UTC](https://forum.builder.io/t/qwik-sdk-registering-custom-components-in-custom-sections/6725/2 "2024-11-07T11:08:10Z")

</div>

Great tip! If you want both reasons, definitely putting `register()` inside `useVisibleTask$()` to ensure the registration happens only when necessary and for better performance. Lazy loading and optimizations in Qwik’s feel like they require you to add these explicit calls like this to run code on the client side. This is a perfect way of creating a solid reference for whenever your example is used in this situation. Thanks for sharing!