Repository: motion-canvas/motion-canvas
File: packages/docs/src/components/Api/ApiItem.tsx (TypeScript)

Code before:
import {useApiLookup} from '@site/src/contexts/api';
import {ThemeDictProvider} from '@site/src/contexts/codeTheme';
import {matchFilters, useFilters} from '@site/src/contexts/filters';
import {TOCItem} from '@docusaurus/mdx-loader';
import Tooltip from '@site/src/components/Tooltip';
import type {JSONOutput} from 'typedoc';
import {ReflectionKind} from './ReflectionKind';
import useIsBrowser from '@docusaurus/useIsBrowser';

interface ApiItemProps {
  route: {
    reflectionId: number;
    projectId: number;
  };
}

export default function ApiItem({route}: ApiItemProps): JSX.Element {
  const lookup = useApiLookup(route.projectId);
  const reflection: JSONOutput.DeclarationReflection =
    lookup[route.reflectionId];
  const [filters] = useFilters();
  // This is needed because of some weird internal logic on
  // Docusaurus' side of things.
  // If you immediately just pass the filtered values
  // the TOC will have wrong values mapped to it
  const [passFilters, setPassFilters] = useState(false);
  const toc = useMemo(() => {
    const toc: TOCItem[] = [];
    if (!reflection.groups || reflection.kind === ReflectionKind.Project) {
      return toc;
    }

    for (const group of reflection.groups) {
      toc.push({
        value: group.title,
        id: group.title,
        level: 2,
      });
      if (group.children) {
        for (const id of group.children) {
          const child = lookup[id];
          if (
            !child ||
            child.hasOwnPage ||
            (passFilters && !matchFilters(filters, child))
          ) {
            continue;
          }
          toc.push({
            value: `<code>${child.name}</code>`,
            id: child.anchor,

Review comment (suggestion):
I did a quick test and it looks like you should be able to use `isBrowser` directly, without the `useEffect` hook.
Just specify it as a dependency of `useMemo` and do:
```ts
(isBrowser && !matchFilters(filters, child))
```

Code after:
import {useApiLookup} from '@site/src/contexts/api';
import {ThemeDictProvider} from '@site/src/contexts/codeTheme';
import {matchFilters, useFilters} from '@site/src/contexts/filters';
import {TOCItem} from '@docusaurus/mdx-loader';
import Tooltip from '@site/src/components/Tooltip';
import type {JSONOutput} from 'typedoc';
import {ReflectionKind} from './ReflectionKind';
import useIsBrowser from '@docusaurus/useIsBrowser';

interface ApiItemProps {
  route: {
    reflectionId: number;
    projectId: number;
  };
}

export default function ApiItem({route}: ApiItemProps): JSX.Element {
  const lookup = useApiLookup(route.projectId);
  const reflection: JSONOutput.DeclarationReflection =
    lookup[route.reflectionId];
  const [filters] = useFilters();

  const isBrowser = useIsBrowser();
  const toc = useMemo(() => {
    const toc: TOCItem[] = [];
    if (!reflection.groups || reflection.kind === ReflectionKind.Project) {
      return toc;
    }

    for (const group of reflection.groups) {
      toc.push({
        value: group.title,
        id: group.title,
        level: 2,
      });
      if (group.children) {
        for (const id of group.children) {
          const child = lookup[id];
          if (
            !child ||
            child.hasOwnPage ||
            (isBrowser && !matchFilters(filters, child))
          ) {
            continue;
          }
          toc.push({
            value: `<code>${child.name}</code>`,
            id: child.anchor,
            level: 3,
          });
        }