chore(deps): update dependency eslint-plugin-react-hooks to v7

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
eslint-plugin-react-hooks (source)	^5.0.0 → ^7.0.0

---

Release Notes

facebook/react (eslint-plugin-react-hooks)

v7.0.1

Compare Source

• Disallowed passing inline useEffectEvent values as JSX props to guard against accidental propagation. (#​34820 by @​jf-eirinha)
• Switch to export = so eslint-plugin-react-hooks emits correct types for consumers in Node16 ESM projects. (#​34949 by @​karlhorky)
• Tightened the typing of configs.flat so the configs export is always defined. (#​34950 by @​poteto)
• Fix named import runtime errors. (#​34951, #​34953 by @​karlhorky)

v7.0.0

Compare Source

This release slims down presets to just 2 configurations (recommended and recommended-latest), and all compiler rules are enabled by default.

• Breaking: Removed recommended-latest-legacy and flat/recommended configs. The plugin now provides recommended (legacy and flat configs with all recommended rules), and recommended-latest (legacy and flat configs with all recommended rules plus new bleeding edge experimental compiler rules). (@​poteto in #​34757)

v6.1.1

Compare Source

Note: 6.1.0 accidentally allowed use of recommended without flat config, causing errors when used with ESLint v9's defineConfig() helper. This has been fixed in 6.1.1.

• Fix recommended config for flat config compatibility. The recommended config has been converted to flat config format. Non-flat config users should use recommended-legacy instead. (@​poteto in #​34700)
• Add recommended-latest and recommended-latest-legacy configs that include React Compiler rules. (@​poteto in #​34675)
• Remove unused NoUnusedOptOutDirectives rule. (@​poteto in #​34703)
• Remove hermes-parser and dependency. (@​poteto in #​34719)
• Remove @babel/plugin-proposal-private-methods dependency. (@​ArnaudBarre and @​josephsavona in #​34715)
• Update for Zod v3/v4 compatibility. (@​kolian and @​josephsavona in #​34717)

v6.1.0

Compare Source

Note: Version 6.0.0 was mistakenly released and immediately deprecated and untagged on npm. This is the first official 6.x major release and includes breaking changes.

• Breaking: Require Node.js 18 or newer. (@​michaelfaith in #​32458)
• Breaking: Flat config is now the default recommended preset. Legacy config moved to recommended-legacy. (@​michaelfaith in #​32457)
• New Violations: Disallow calling use within try/catch blocks. (@​poteto in #​34040)
• New Violations: Disallow calling useEffectEvent functions in arbitrary closures. (@​jbrown215 in #​33544)
• Handle React.useEffect in addition to useEffect in rules-of-hooks. (@​Ayc0 in #​34076)
• Added react-hooks settings config option that to accept additionalEffectHooks that are used across exhaustive-deps and rules-of-hooks rules. (@​jbrown215) in #​34497

v6.0.0

Compare Source

Accidentally released. See 6.1.0 for the actual changes.

v5.2.0

Compare Source

• Support flat config (@​michaelfaith in #​30774)
• Convert the plugin to TypeScript and provide package type declarations (@​michaelfaith in #​32279, #​32283, #​32240, #​32400 and @​poteto in #​32420)
• Fix false positive error in components with do/while loops (@​tyxla in #​31720)
• Detect issues in class properties (@​mjesun & @​ecraig12345 in #​31823)

---

Configuration

📅 Schedule: Branch creation - "every weekend" in timezone US/Eastern, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[github-actions]

OpenAPI Changes

Show/hide No detectable change.

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[jonkafton]

v7 is stricter. For reference, these issues fixed:

/Users/jk/mit/mit-open/frontends/main/src/app-pages/CertificatePage/CertificatePage.tsx
  779:19  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/jk/mit/mit-open/frontends/main/src/app-pages/CertificatePage/CertificatePage.tsx:779:19
  777 |         open={shareOpen}
  778 |         title={`${title} Certificate issued by MIT Open Learning`}
> 779 |         anchorEl={shareButtonRef.current}
      |                   ^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  780 |         onClose={() => setShareOpen(false)}
  781 |         pageUrl={pageUrl}
  782 |       />  react-hooks/refs

/Users/jk/mit/mit-open/frontends/main/src/app-pages/ChannelPage/ChannelPageTemplate.tsx
  88:6  error  Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.

/Users/jk/mit/mit-open/frontends/main/src/app-pages/ChannelPage/ChannelPageTemplate.tsx:88:6
  86 |
  87 |   return (
> 88 |     <ChannelTemplate name={name} channelType={channelType}>
     |      ^^^^^^^^^^^^^^^ This component is created during render
  89 |       {children}
  90 |     </ChannelTemplate>
  91 |   )

/Users/jk/mit/mit-open/frontends/main/src/app-pages/ChannelPage/ChannelPageTemplate.tsx:85:27
  83 |     }
  84 |   }
> 85 |   const ChannelTemplate = getChannelTemplate(channelType)
     |                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The component is created during render here
  86 |
  87 |   return (
  88 |     <ChannelTemplate name={name} channelType={channelType}>  react-hooks/static-components

/Users/jk/mit/mit-open/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx
  239: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/jk/mit/mit-open/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx:239:5
  237 |   useEffect(() => {
  238 |     if (!data) return
> 239 |     setShuffled(shuffle(data?.results))
      |     ^^^^^^^^^^^ Avoid calling setState() directly within an effect
  240 |     setImageSequence(shuffle([1, 2, 3, 4, 5, 6]))
  241 |   }, [data])
  242 |  react-hooks/set-state-in-effect

/Users/jk/mit/mit-open/frontends/main/src/app/page.tsx
  106:44  error  Error: Cannot call impure function during render

`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).

/Users/jk/mit/mit-open/frontends/main/src/app/page.tsx:106:44
  104 |   return (
  105 |     <HydrationBoundary state={dehydrate(queryClient)}>
> 106 |       <HomePage heroImageIndex={Math.floor(Math.random() * 5) + 1} />
      |                                            ^^^^^^^^^^^^^ Cannot call impure function
  107 |     </HydrationBoundary>
  108 |   )
  109 | }  react-hooks/purity

/Users/jk/mit/mit-open/frontends/main/src/page-components/ItemsListing/ItemsListing.tsx
  72:19  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/jk/mit/mit-open/frontends/main/src/page-components/ItemsListing/ItemsListing.tsx:72:19
  70 |    *    so sync `items` -> `sorted` when `items` changes.
  71 |    */
> 72 |   useEffect(() => setSorted(items), [items])
     |                   ^^^^^^^^^ Avoid calling setState() directly within an effect
  73 |
  74 |   const renderDragging: RenderActive = useCallback(
  75 |     (active) => {  react-hooks/set-state-in-effect

/Users/jk/mit/mit-open/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.tsx
  211:7  error  Error: This value cannot be modified

Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead.

/Users/jk/mit/mit-open/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.tsx:211:7
  209 |   useEffect(() => {
  210 |     if (scrollElement && chatTransitionState === ChatTransitionState.Closing) {
> 211 |       scrollElement.scrollTop = scrollPosition
      |       ^^^^^^^^^^^^^ `scrollElement` cannot be modified
  212 |     }
  213 |   }, [chatTransitionState, scrollElement, scrollPosition])
  214 |  react-hooks/immutability

/Users/jk/mit/mit-open/frontends/main/src/page-components/LearningResourceExpanded/ResourceDescription.tsx
  90:22  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/jk/mit/mit-open/frontends/main/src/page-components/LearningResourceExpanded/ResourceDescription.tsx:90:22
  88 |         lang={getResourceLanguage(resource)}
  89 |       />
> 90 |       {(isClamped || clampedOnFirstRender.current) && (
     |                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  91 |         <Link
  92 |           scroll={false}
  93 |           color="red"  react-hooks/refs
  90:22  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/jk/mit/mit-open/frontends/main/src/page-components/LearningResourceExpanded/ResourceDescription.tsx:90:22
  88 |         lang={getResourceLanguage(resource)}
  89 |       />
> 90 |       {(isClamped || clampedOnFirstRender.current) && (
     |                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  91 |         <Link
  92 |           scroll={false}
  93 |           color="red"  react-hooks/refs

/Users/jk/mit/mit-open/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
  43:5  error  Compilation Skipped: Existing memoization could not be preserved

React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.

/Users/jk/mit/mit-open/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx:43:5
  41 |
  42 |   const handleAddToUserListClick: LearningResourceCardProps["onAddToUserListClick"] =
> 43 |     useMemo(() => {
     |     ^^^^^^^^^^^^^^^
> 44 |       if (!user) {
     | ^^^^^^^^^^^^^^^^^^
> 45 |         // user info is still loading
     …
     | ^^^^^^^^^^^^^^^^^^
> 55 |       }
     | ^^^^^^^^^^^^^^^^^^
> 56 |     }, [user])
     | ^^^^^^^^^^^^^^^ Could not preserve existing memoization
  57 |
  58 |   const onClick = useLearningResourceDetailSetCache(resource)
  59 |  react-hooks/preserve-manual-memoization

/Users/jk/mit/mit-open/frontends/main/src/page-components/TiptapEditor/useSchema.ts
  28:7  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/jk/mit/mit-open/frontends/main/src/page-components/TiptapEditor/useSchema.ts:28:7
  26 |     const docType = schema.nodes.doc
  27 |     if (!docType) {
> 28 |       setSchemaError("Document node type not found in schema")
     |       ^^^^^^^^^^^^^^ Avoid calling setState() directly within an effect
  29 |       return
  30 |     }
  31 |  react-hooks/set-state-in-effect

/Users/jk/mit/mit-open/frontends/ol-components/src/components/Dialog/Dialog.stories.tsx
  10: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/jk/mit/mit-open/frontends/ol-components/src/components/Dialog/Dialog.stories.tsx:10:5
   8 |
   9 |   useEffect(() => {
> 10 |     setOpen(props.open)
     |     ^^^^^^^ Avoid calling setState() directly within an effect
  11 |   }, [props.open])
  12 |
  13 |   const close = () => {  react-hooks/set-state-in-effect

/Users/jk/mit/mit-open/frontends/ol-components/src/components/EmbedlyCard/EmbedlyCard.tsx
  83:5  error  Error: This value cannot be modified

Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead.

/Users/jk/mit/mit-open/frontends/ol-components/src/components/EmbedlyCard/EmbedlyCard.tsx:83:5
  81 |      */
  82 |     if (!container) return
> 83 |     container.innerHTML = ""
     |     ^^^^^^^^^ `container` cannot be modified
  84 |     if (!isURL(url)) return
  85 |     const a = document.createElement("a")
  86 |     a.dataset.cardChrome = "0"  react-hooks/immutability

/Users/jk/mit/mit-open/frontends/ol-components/src/components/NavDrawer/NavDrawer.stories.tsx
  54:8  error  Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.

/Users/jk/mit/mit-open/frontends/ol-components/src/components/NavDrawer/NavDrawer.stories.tsx:54:8
  52 |   return (
  53 |     <div>
> 54 |       <StyledButton variant="outlined" onClick={handleClickOpen}>
     |        ^^^^^^^^^^^^ This component is created during render
  55 |         Toggle drawer
  56 |       </StyledButton>
  57 |       <NavDrawer navData={navData} open={open} onClose={setOpen.off} />

/Users/jk/mit/mit-open/frontends/ol-components/src/components/NavDrawer/NavDrawer.stories.tsx:47:24
  45 |   }
  46 |
> 47 |   const StyledButton = styled(MuiButton)({
     |                        ^^^^^^^^^^^^^^^^^^^
> 48 |     position: "absolute",
     | ^^^^^^^^^^^^^^^^^^^^^^^^^
> 49 |     right: "20px",
     | ^^^^^^^^^^^^^^^^^^^^^^^^^
> 50 |   })
     | ^^^^^ The component is created during render here
  51 |
  52 |   return (
  53 |     <div>  react-hooks/static-components

/Users/jk/mit/mit-open/frontends/ol-utilities/src/hooks/useThrottle.tsx
  9:26  error  Error: Cannot call impure function during render

`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).

/Users/jk/mit/mit-open/frontends/ol-utilities/src/hooks/useThrottle.tsx:9:26
   7 |   delay: number,
   8 | ) => {
>  9 |   const lastRun = useRef(Date.now())
     |                          ^^^^^^^^^^ Cannot call impure function
  10 |
  11 |   return useCallback(
  12 |     (...args: Parameters<T>) => {  react-hooks/purity

/Users/jk/mit/mit-open/frontends/ol-utilities/src/ssr/NoSSR.tsx
  14: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/jk/mit/mit-open/frontends/ol-utilities/src/ssr/NoSSR.tsx:14:5
  12 |
  13 |   useEffect(() => {
> 14 |     setClient(true)
     |     ^^^^^^^^^ Avoid calling setState() directly within an effect
  15 |   }, [])
  16 |
  17 |   return isClient ? children : onSSR  react-hooks/set-state-in-effect

✖ 15 problems (15 errors, 0 warnings)

[renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.