CopyToClipboardButton fails linters

[angelinashepherd]

Hi Tiptap team! I've been trying to use the CopyToClipboardButton component that's documented here. However, I am getting a number of linting errors. Curious how to best get this resolved? Code snippet will be attached

/Users/xxxxx/Desktop/projects/xxxxx/src/components/tiptap-ui-primitive/tooltip/tooltip.tsx
  172:33  error  Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the current property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

/Users/xxxxx/Desktop/projects/xxxxx/src/components/tiptap-ui-primitive/tooltip/tooltip.tsx:172:33
  170 |     return cloneElement(
  171 |       children,
172 |       context.getReferenceProps({
      |                                 ^
173 |         ref,
      | ^^^^^^^^^^^^
174 |         ...props,
      | ^^^^^^^^^^^^
175 |         ...(typeof children.props === 'object' ? children.props : {}),
      | ^^^^^^^^^^^^
176 |         ...dataAttributes,
      | ^^^^^^^^^^^^
177 |       })
      | ^^^^^^^^ Passing a ref to a function may read its value during render
  178 |     );
  179 |   }
  180 |  react-hooks/refs
/Users/xxxxx/Desktop/projects/xxxxx/src/hooks/use-is-breakpoint.ts
  24:5  error  Error: Calling setState synchronously within an effect can trigger cascading renders

Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
Update external systems with the latest state from React.
Subscribe for updates from some external system, calling setState in a callback function when external state changes.

Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).

/Users/xxxxx/Desktop/projects/xxxxx/src/hooks/use-is-breakpoint.ts:24:5
  22 |
  23 |     // Set initial value
24 |     setMatches(mql.matches);
     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect
  25 |
  26 |     // Add listener
  27 |     mql.addEventListener('change', onChange);  react-hooks/set-state-in-effect

✖ 2 problems (2 errors, 0 warnings)

[Aslam97]

Hi @angelinashepherd Thanks for reporting this. The error is caused by stricter rules in the latest eslint-plugin-react-hooks, especially around dependency tracking in useEffect.

Some patterns in the Tiptap UI codebase would be better expressed using React 19’s useEffectEvent, but since the library still supports React 18, it relies on older patterns that now get flagged more aggressively by the linter. This is a linting issue, not a runtime React error.

As a workaround, you can downgrade the plugin to:

"eslint-plugin-react-hooks": "^5.2.0"

[angelinashepherd]

thanks @Aslam97 . Is there any plan for the team to upgrade the packages to become more compatible with React 19 and stop support for React 18?

[bdbch]

Hey @angelinashepherd - we are looking forward for it, however we need to make sure an upgrade to React 19 won't make our libraries invalid to use for everyone who was not able yet to upgrade to React 19.

We will probably drop React 18 support with the next major version as that would mean people need to manually upgrade their codebases already in case they want to use it.

In the meanwhile I think the most sane option here is to ignore the lint error as it's not critical, just discouraged by React 19's code standards.