Skip to content

The highlight and clear functions returned from useHighlightContext are not memoized #53

@srking

Description

@srking

Describe the bug
The highlight and clear functions returned from useHighlightContext are not memoized. As a consequence, when they are used as described in the documentation the React exhaustive-deps lint rule is violated. Adding either of these functions to the dependency array results in the React Maximum update depth exceeded error.

To Reproduce
Call highlight or clear from useHighlightContext from within a useEffect hook, with either of the functions listed in the dependency array:

import { useHighlightContext } from '@pdf-viewer/react';
import { TextHighlight } from '@pdf-viewer/react/dist/types/utils/types';
import { useEffect } from 'react';

interface Props {
  highlights: TextHighlight[];
}

export function PdfHighlights({ highlights }: Props): ReactNode {
  useEffect(() => {
    highlight(highlights);
  
    return () => {
      clear();
    };
  }, [highlights, highlight, clear]);

  return null;
}

Expected behavior
Highlights are applied correctly, and update when the value of highlights changes.

Actual behaviour
React Maximum update depth exceeded error is raised.

Desktop (please complete the following information):

  • OS: macOS 26.2
  • Browser: Chrome 143.0.7499.193

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions