Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: remove react-hooks linter suppression #8051

Open
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

stipsan
Copy link
Member

@stipsan stipsan commented Dec 13, 2024

Description

Suppressing the linter on react-hooks/exhaustive-deps causes React Compiler to bail, as it can no longer determine if the optimization it plans to do will preserve the original behavior of how often and when useEffect hooks will fire.
It's also a bit dangerous to leave in the codebase as what may have started off as omitting a single value from the dependencies array, can over time lead to other values being omitted that would otherwise been caught be the linter.
For example DocumentListPaneContent have had its linter suppression for a long long time, and since then we have added const {t} = useTranslation(structureLocaleNamespace) and t should be a dependency, but it's not.

This PR removes all of them, and in the case of useEffect the useEffectEvent ponyfill is used to preserve the original intent of only having the effect fire when specific dependencies have changed, while no longer suppressing the linter.

What to review

Is there enough context?

Testing

Existing tests are sufficient?

Notes for release

Removed react-hooks/exhaustive-deps ESLint suppressions, allowing React Compiler to auto-memoize components that were previously skipped over.

Copy link

vercel bot commented Dec 13, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
page-building-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 20, 2024 6:53pm
performance-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 20, 2024 6:53pm
test-next-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 20, 2024 6:53pm
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 20, 2024 6:53pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Visit Preview Dec 20, 2024 6:53pm

Copy link
Contributor

No changes to documentation

Copy link
Contributor

github-actions bot commented Dec 13, 2024

Component Testing Report Updated Dec 20, 2024 6:48 PM (UTC)

✅ All Tests Passed -- expand for details
File Status Duration Passed Skipped Failed
comments/CommentInput.spec.tsx ✅ Passed (Inspect) 1m 6s 15 0 0
formBuilder/ArrayInput.spec.tsx ✅ Passed (Inspect) 12s 3 0 0
formBuilder/inputs/PortableText/Annotations.spec.tsx ✅ Passed (Inspect) 37s 6 0 0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx ✅ Passed (Inspect) 50s 11 7 0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx ✅ Passed (Inspect) 0s 0 12 0
formBuilder/inputs/PortableText/Decorators.spec.tsx ✅ Passed (Inspect) 25s 6 0 0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx ✅ Passed (Inspect) 14s 3 0 0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx ✅ Passed (Inspect) 26s 6 0 0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx ✅ Passed (Inspect) 1m 6s 15 0 0
formBuilder/inputs/PortableText/Input.spec.tsx ✅ Passed (Inspect) 1m 26s 21 0 0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx ✅ Passed (Inspect) 1m 39s 18 0 0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx ✅ Passed (Inspect) 12s 3 9 0
formBuilder/inputs/PortableText/Styles.spec.tsx ✅ Passed (Inspect) 26s 6 0 0
formBuilder/inputs/PortableText/Toolbar.spec.tsx ✅ Passed (Inspect) 1m 42s 21 0 0
formBuilder/tree-editing/TreeEditing.spec.tsx ✅ Passed (Inspect) 0s 0 3 0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx ✅ Passed (Inspect) 0s 0 3 0

Copy link
Contributor

github-actions bot commented Dec 13, 2024

⚡️ Editor Performance Report

Updated Fri, 20 Dec 2024 18:50:11 GMT

Benchmark reference
latency of sanity@latest
experiment
latency of this branch
Δ (%)
latency difference
article (title) 26.7 efps (38ms) 27.0 efps (37ms) -1ms (-1.3%)
article (body) 77.5 efps (13ms) 71.9 efps (14ms) +1ms (-/-%)
article (string inside object) 27.8 efps (36ms) 30.3 efps (33ms) -3ms (-8.3%)
article (string inside array) 25.6 efps (39ms) 26.3 efps (38ms) -1ms (-2.6%)
recipe (name) 52.6 efps (19ms) 58.8 efps (17ms) -2ms (-10.5%)
recipe (description) 58.8 efps (17ms) 66.7 efps (15ms) -2ms (-11.8%)
recipe (instructions) 99.9+ efps (5ms) 99.9+ efps (5ms) +0ms (-/-%)
synthetic (title) 19.6 efps (51ms) 20.0 efps (50ms) -1ms (-2.0%)
synthetic (string inside object) 19.2 efps (52ms) 21.3 efps (47ms) -5ms (-9.6%)

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark latency p75 p90 p99 blocking time test duration
article (title) 38ms 42ms 59ms 458ms 835ms 10.3s
article (body) 13ms 16ms 31ms 65ms 198ms 4.9s
article (string inside object) 36ms 40ms 55ms 110ms 128ms 6.6s
article (string inside array) 39ms 41ms 47ms 78ms 146ms 6.6s
recipe (name) 19ms 22ms 24ms 38ms 0ms 6.7s
recipe (description) 17ms 18ms 21ms 30ms 0ms 4.4s
recipe (instructions) 5ms 7ms 8ms 16ms 0ms 3.0s
synthetic (title) 51ms 54ms 63ms 281ms 571ms 12.9s
synthetic (string inside object) 52ms 55ms 71ms 399ms 762ms 8.6s

🧪 Experiment result

The performance result of this branch

Benchmark latency p75 p90 p99 blocking time test duration
article (title) 37ms 43ms 59ms 169ms 716ms 9.5s
article (body) 14ms 16ms 18ms 154ms 241ms 5.1s
article (string inside object) 33ms 35ms 39ms 62ms 0ms 6.0s
article (string inside array) 38ms 41ms 46ms 121ms 129ms 6.8s
recipe (name) 17ms 18ms 19ms 32ms 0ms 6.1s
recipe (description) 15ms 17ms 19ms 39ms 0ms 4.3s
recipe (instructions) 5ms 7ms 8ms 9ms 0ms 3.0s
synthetic (title) 50ms 51ms 56ms 76ms 129ms 11.2s
synthetic (string inside object) 47ms 50ms 60ms 136ms 751ms 8.1s

📚 Glossary

column definitions

  • benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
  • latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
  • p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
  • p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
  • p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
  • blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
  • test duration — how long the test run took to complete.

// Task is updated on every change, wait until the revision changes to update the activity log.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetchAndParse, task._rev])
handleFetchAndParse(task._rev)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sending the task._rev here is just to make it a valid useEffect dependency in the eyes of eslint-plugin-react-hooks/exhaustive-deps as well as the React Compiler.

Comment on lines -250 to -252
// Explicitly don't include `noDocumentsContent` in the deps array, as it's
// causing a visual bug where the "No documents" message is shown for a split second
// when clearing a search query with no results
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't reproduce this issue mentioned here, so I think we're good.
In any case, it's not ideal that what initially was just noDocumentsContent being exempt has eventually led to other deps, t and paneTitle, being accidentally omitted.
It demonstrates why it's risky to suppress the linter to begin with 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant