Cannot use react hooks where ReactMarkdown is rendered

[karosowka13]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

8.04

Link to runnable example

Full example can be see here.

Steps to reproduce

I want to set up sections menu based on headers that are in the markdown.
When I call set state in components parser I've got an error.

e.g.

const headerParser = ({ node, className, children, level, ...props }: any) => {
      if (children === undefined) {
        console.log("returnm empty block");
        return <></>;
      }
      let text = children[0]?.props?.children[0];
      let href = children[0]?.props?.href;
      let id = href === "#" ? href.slice(1) : href;
      setSections([...sections, {title:text, level}])
      return (
        <node.tagName {...props} {...{ className }} id={id}>
          <a href={href}>{text}</a>
        </node.tagName>
      );
}

When I move set state to parent component and add React.memo, it works. But I cannot reset the sections menu when the components rerender. It just adds more records to it from previous views, which is no a goal.

The same with any other hook like useEffect etc.

Expected behavior

The state should be change without infinite loop.

Actual behavior

Error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Runtime

Node v17

Package manager

npm 8

OS

macOS

Build and bundle tools

Webpack, Create React App

[aaronkarpati]

I experienced the same issue! The example attached shows the problem clearly❗️Seems like the component renderer and a component scoped state change/hook causes an infinite loop.

[Murderlon]

Hi, note that this is not an issue with react-markdown, you break React patterns by incorrectly setting state inside a render causing an infinite loop.

I'm guessing you probably want something like this (pseudo code, not tested):

import remark from 'remark'
import remarkHeadings from '@vcarl/remark-headings';

const headingProcessor = remark().use(remarkHeadings)

function Component ({content}) {
  const headings = useMemo(() => {
    const file = headingProcessor.processSync(content)
    return file.data.headings
  }, [content])
}

[karosowka13]

Yeah you are definitely right.
Thank you very much for your answer!
I will close the issue.