Describe the bug

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).

Affected component/components

Sidebar

How to reproduce

The issue need not to be reproduced and is much rather a performance improvement and suggestion to utilize the new features of React >18, without them this issue may or may not appear in newer projects. For slightly older versions (<18), this issue can be reproduced by

1. Create a new next project with the component
2. Run npm run dev and visit in a browser
3. The browser infinitely shows "Compiling..." and the system overheats

Codesandbox/StackBlitz link

No response

Logs

System Info

Operating System: macOS 26.5
Browser(s):

1. Chrome 149.0.7827.200
2. Firefox 152.0.3
3. Safari 26.5 (21624.2.5.11.4)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues