Error: Cannot create components during render

[Mr-Vipi]

import * as runtime from "react/jsx-runtime"
import Image from "next/image"

import { Callout } from "./callout"

const useMDXComponent = (code: string) => {
  const fn = new Function(code)
  return fn({ ...runtime }).default
}

const components = {
  Image,
  Callout,
}

type MdxProps = {
  code: string
}

export function MDXContent({ code }: Readonly<MdxProps>) {
  const Component = useMDXComponent(code)

  return <Component components={{ ...components }} />
}

I have this code to render the MDX following the documentation but since I upgraded to nextjs 16 with react 19.2 I have this error:

Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.

/home/mrguga/Workplace/my-portfolio/components/mdx-content.tsx:23:11
  21 |   const Component = useMDXComponent(code)
  22 |
> 23 |   return <Component components={{ ...components }} />
     |           ^^^^^^^^^ This component is created during render
  24 | }
  25 |

/home/mrguga/Workplace/my-portfolio/components/mdx-content.tsx:21:21
  19 |
  20 | export function MDXContent({ code }: Readonly<MdxProps>) {
> 21 |   const Component = useMDXComponent(code)
     |                     ^^^^^^^^^^^^^^^^^^^^^ The component is created during render here
  22 |
  23 |   return <Component components={{ ...components }} />
  24 | }eslint(react-hooks/static-components)

How can I solve this in a clean way?

And I recognised that Component returned from useMDXComponent is of type any can it be more declarative?

[fufuShih]

Trying useMemo

import type { ComponentType } from "react"

const getMDXComponent = (code: string): ComponentType<MDXComponentProps> => {
  const fn = new Function(code)
  return fn({ ...runtime }).default
}

// ...

export function MDXContent({ code }: Readonly<MdxProps>) {
  const Component = useMemo(() => getMDXComponent(code), [code])

  return <Component components={{ ...components }} />
}

[Mr-Vipi]

Trying useMemo

import type { ComponentType } from "react"

const getMDXComponent = (code: string): ComponentType => {
const fn = new Function(code)
return fn({ ...runtime }).default
}

// ...

export function MDXContent({ code }: Readonly) {
const Component = useMemo(() => getMDXComponent(code), [code])

return <Component components={{ ...components }} />
}

Still got the same error with your solution @fufuShih :

Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.

/home/mrguga/Workplace/my-portfolio/components/mdx-content.tsx:24:11
  22 |   const Component = useMemo(() => getMDXComponent(code), [code])
  23 |
> 24 |   return <Component components={{ ...components }} />
     |           ^^^^^^^^^ This component is created during render
  25 | }

/home/mrguga/Workplace/my-portfolio/components/mdx-content.tsx:22:35
  20 |
  21 | export function MDXContent({ code }: Readonly<MdxProps>) {
> 22 |   const Component = useMemo(() => getMDXComponent(code), [code])
     |                                   ^^^^^^^^^^^^^^^^^^^^^ The component is created during render here
  23 |
  24 |   return <Component components={{ ...components }} />
  25 | }

as well when should I import this:

Cannot find name 'MDXComponentProps'.

below the full code:

import * as runtime from "react/jsx-runtime"
import Image from "next/image"

import { Callout } from "./callout"
import { ComponentType, useMemo } from "react"

const getMDXComponent = (code: string): ComponentType<MDXComponentProps> => {
  const fn = new Function(code)
  return fn({ ...runtime }).default
}

const components = {
  Image,
  Callout,
}

type MdxProps = {
  code: string
}

export function MDXContent({ code }: Readonly<MdxProps>) {
  const Component = useMemo(() => getMDXComponent(code), [code])

  return <Component components={{ ...components }} />
}

[fufuShih]

Trying useMemo

import type { ComponentType } from "react"

const getMDXComponent = (code: string): ComponentType => {
const fn = new Function(code)
return fn({ ...runtime }).default
}

// ...

export function MDXContent({ code }: Readonly) {
const Component = useMemo(() => getMDXComponent(code), [code])

return <Component components={{ ...components }} />
}

1. useMemo version

type MDXComponentProps = {
  components?: Record<string, ComponentType<any>>;
};

const getMDXComponent = (code: string): ComponentType<MDXComponentProps> => {
  const fn = new Function(code);
  return fn({ ...runtime }).default as ComponentType<MDXComponentProps>;
};

const components = {
  Image,
  Callout,
  CodePen,
  mermaid: Mermaid,
  Mermaid,
};

interface MdxProps {
  code: string;
}

export function MDXContent({ code }: Readonly<MdxProps>) {
  const Component = useMemo(() => getMDXComponent(code), [code]);

  return <Component components={components} />;
}

2. My current method is following:

'use client';

import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
import Image from 'next/image';
import * as runtime from 'react/jsx-runtime';
import { Callout, CodePen } from './mdx';

const useMDXComponent = (code: string) => {
  const fn = new Function(code);
  return fn({ ...runtime }).default;
};

const components = {
  Image,
  Callout,
  CodePen,
  Mermaid,
};

interface MdxProps {
  code: string;
}

export function MDXContent({ code }: MdxProps) {
  const Component = useMDXComponent(code);
  return <Component components={components} />;
}

[Mr-Vipi]

@fufuShih I have, your same exact solution and I used to have it without eslint errors prior to upgrade in nextjs 16 and react 19.2, but since the upgrade I have the I got the above error coming from eslint(react-hooks/static-components)