Fix new react hook eslint violations

Author: sjdemartini

src/demo/SuggestionList.tsx

@@ -4,7 +4,7 @@ import ListItemButton from "@mui/material/ListItemButton";
 import Paper from "@mui/material/Paper";
 import type { MentionNodeAttrs } from "@tiptap/extension-mention";
 import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import type { MentionSuggestion } from "./mentionSuggestionOptions";
 
 export type SuggestionListRef = {
@@ -24,6 +24,14 @@ const SuggestionList = forwardRef<SuggestionListRef, SuggestionListProps>(
   (props, ref) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
 
+    // Follow React's recommendation to avoid calling setState within an effect
+    // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    const [prevItems, setPrevItems] = useState(props.items);
+    if (props.items !== prevItems) {
+      setPrevItems(props.items);
+      setSelectedIndex(0);
+    }
+
     const selectItem = (index: number) => {
       if (index >= props.items.length) {
         // Make sure we actually have enough items to select the given index. For
@@ -62,10 +70,6 @@ const SuggestionList = forwardRef<SuggestionListRef, SuggestionListProps>(
       selectItem(selectedIndex);
     };
 
-    useEffect(() => {
-      setSelectedIndex(0);
-    }, [props.items]);
-
     useImperativeHandle(ref, () => ({
       onKeyDown: ({ event }) => {
         if (event.key === "ArrowUp") {

src/extensions/ResizableImageComponent.tsx

@@ -140,6 +140,7 @@ function ResizableImageComponent(inProps: ResizableImageComponentProps) {
       // Throttle our "on resize" handler, since the event fires very rapidly during
       // dragging, so rendering would end up stuttering a bit without a throttle
       throttle(
+        // eslint-disable-next-line react-hooks/refs -- ref is used in a memoized throttle callback (event handler), not during render
         (event: MouseEvent) => {
           if (!imageRef.current) {
             return;