Add new eslint rule reference docs #7986
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 One Page Changed SizeThe following page changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
Wow this is incredible!!! Still going through all the content but looks great :-) |
poteto
force-pushed
the
pr7986
branch
2 times, most recently
from
2f0855c to
6e3eebc
Compare
| The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run. | ||
|
|
||
| ```js {expectedErrors: {'react-compiler': [5]}} | ||
| // ❌ Try/catch around `use` hook | ||
| function Component({promise}) { | ||
| try { | ||
| const data = use(promise); // Won't catch - `use` suspends, not throws | ||
| return <div>{data}</div>; | ||
| } catch (error) { | ||
| return <div>Failed to load</div>; // Unreachable | ||
| } | ||
| } |
There was a problem hiding this comment.
I understand the intention is for the implementation details of use to be unnecessary for React developers, but in the current implementation of use it will throw and the catch block will run. Someone could log to the console before returning <div>Failed to load</div> and see the catch block did indeed run, couldn't they? While it totally makes sense for developers to not catch or otherwise manipulate what use throws, it seems like the docs stating use doesn't throw will cause confusion if and when they encounter it throwing.
EDIT: Maybe this is only relevant when using the compiler. I'm looking at it from the perspective of a non-compiled React component.
There was a problem hiding this comment.
This will be deprecated soon: facebook/react#34032
src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
Outdated
Show resolved
Hide resolved
src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
Outdated
Show resolved
Hide resolved
Adds new docs for our new eslint rules.
Adds new docs for our new eslint rules.