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

perf: Reduce api reference re-renders while scrolling #595

Merged
merged 9 commits into from
Apr 2, 2024

Conversation

abvthecity
Copy link
Contributor

@abvthecity abvthecity commented Mar 30, 2024

  1. context values must be memoized.
  2. contexts with values that don't update frequently should be separated from contexts with values that do update frequently. for example, layoutBreakpoint and viewportSize need to be separated so that components that only need to update when layout breakpoint changes, does not update on each intermediary resize event.
  3. useRouter() forces a re-render on deeply nested components. A few instances of this are replaced by useSlugListener which takes an event-driven approach to minimize re-renders.
  4. .clientHeight and .scrollHeight turn out to be expensive values to get in Safari. Wrapping it in a getter method in useImperativeHandle helps avoid calling it unless it's needed.

Copy link

vercel bot commented Mar 30, 2024

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

Name Status Preview Updated (UTC)
fern-dev ✅ Ready (Inspect) Visit Preview Apr 2, 2024 9:39pm
3 Ignored Deployments
Name Status Preview Updated (UTC)
fern-prod ⬜️ Ignored (Inspect) Visit Preview Apr 2, 2024 9:39pm
fontawesome-cdn ⬜️ Ignored (Inspect) Visit Preview Apr 2, 2024 9:39pm
private-docs ⬜️ Ignored (Inspect) Apr 2, 2024 9:39pm

@abvthecity abvthecity changed the title Reduce react re-renders attempt 3! most likely candidate. Reduce api component re-renders while scrolling Apr 2, 2024
@abvthecity abvthecity changed the title Reduce api component re-renders while scrolling Reduce api reference re-renders while scrolling Apr 2, 2024
@abvthecity abvthecity changed the title Reduce api reference re-renders while scrolling perf: Reduce api reference re-renders while scrolling Apr 2, 2024
Copy link

github-actions bot commented Apr 2, 2024

PR Preview

Building...

@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@fern-api fern-api deleted a comment from github-actions bot Apr 2, 2024
@abvthecity abvthecity merged commit 41b7015 into main Apr 2, 2024
10 of 12 checks passed
@abvthecity abvthecity deleted the ajiang/rerender-attempt-3 branch April 2, 2024 21:44
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