useFetcher causes an infinite render loop with custom MDX components

[platon-ivanov]

When using mdx-bundler or mdx-js with custom components, they work as expected.

However, if a line with useFetcher() is added on any level of the components, it causes the component to rerender infinitely.

Example:

Works:

<MDXContent
    components={{
      img: props => {
        return <img className="max-w-full" {...props} />
      }}
/>

Causes a render loop:

<MDXContent
    components={{
      img: props => {
        const fetcher = useFetcher()
        return <img className="max-w-full" {...props} />
      }}
/>

How can the infinite render loop be avoided?

[Pouet--]

Same problem here, with no external library (just a component with html tags) : declaring useFetcher without using it causes infinite rendering loop.