fix(v2): useTOC hooks should not be called in each nested children

[endiliey]

Motivation

TOC hooks is called inside each nested children previously. See gif below on how many getActiveHeader which leads to document query calls.

See recursive headings

docusaurus/packages/docusaurus-theme-classic/src/theme/DocItem/index.js

Lines 22 to 38 in 3be2e86

	function Headings({headings, isChild}) {
	useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
	if (!headings.length) return null;
	return (
	<ul className={isChild ? '' : 'contents contents__left-border'}>
	{headings.map(heading => (
	<li key={heading.id}>
	<a href={`#${heading.id}`} className={LINK_CLASS_NAME}>
	{heading.value}
	</a>
	<Headings isChild headings={heading.children} />
	</li>
	))}
	</ul>
	);
	}

We should also do better in future by doing some throttling, but that's out of scope of this PR.
We can also split RightTOC component as another @theme/RightTOC component so its swizzle-able if needed (but better in future PR so that lerna autogenerated changelog can pick it better)

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

• Netlify
  right toc still highlighted on scroll
• Less number of getActiveHeader calls
  

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit ed626cf

https://deploy-preview-1959--docusaurus-2.netlify.com

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit ed626cf

https://deploy-preview-1959--docusaurus-preview.netlify.com

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 81be1ea

https://deploy-preview-1959--docusaurus-2.netlify.com

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit 81be1ea

https://deploy-preview-1959--docusaurus-preview.netlify.com

[yangshun]

Good catch 👍