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

[Beta] Update Next and React #4680

Merged
merged 2 commits into from
May 23, 2022
Merged

[Beta] Update Next and React #4680

merged 2 commits into from
May 23, 2022

Conversation

gaearon
Copy link
Member

@gaearon gaearon commented May 23, 2022

Bumps React and Next.
Adds some fixes for issues I noticed.

},
];
},
// TODO: this causes extra router.replace() on every page.
Copy link
Member Author

@gaearon gaearon May 23, 2022

Choose a reason for hiding this comment

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

See here vercel/next.js#33861 (comment).

Originally I thought the startTransition call inside Next.js worked around it, but I was still seeing the issue. I ended up just ripping out this feature for now to avoid the false positive router navigations.

function getServerSnapshot() {
return false;
}
return React.useSyncExternalStore(
Copy link
Member Author

Choose a reason for hiding this comment

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

useSES seems like the way to go here since the value may change between sandboxes mounting. So it's not legit to cache it and then read the value that could be inconsistent from the server into useState.

@github-actions
Copy link

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

🎉 Global Bundle Size Decreased

Page Size (compressed)
global 93.92 KB (🟢 -1.42 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Hundred Ninety Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/ 56.15 KB (🟡 +1.44 KB) 150.07 KB
/404 55.25 KB (🟡 +1.44 KB) 149.17 KB
/_error 198 B (🟡 +1 B) 94.11 KB
/apis 56.03 KB (🟡 +1.44 KB) 149.95 KB
/apis/createcontext 57.78 KB (🟡 +1.44 KB) 151.7 KB
/apis/reactdom 55.97 KB (🟡 +1.44 KB) 149.89 KB
/apis/render 58.01 KB (🟡 +1.44 KB) 151.93 KB
/apis/usecontext 63.74 KB (🟡 +1.44 KB) 157.66 KB
/apis/usereducer 63.37 KB (🟡 +1.44 KB) 157.29 KB
/apis/useref 61.08 KB (🟡 +1.44 KB) 155 KB
/apis/usestate 67 KB (🟡 +1.44 KB) 160.92 KB
/blog 41.59 KB (🟡 +387 B) 135.51 KB
/blog/2013/06/02/jsfiddle-integration 66.5 KB (🟡 +1.41 KB) 160.42 KB
/blog/2013/06/05/why-react 68.22 KB (🟡 +1.41 KB) 162.14 KB
/blog/2013/06/12/community-roundup 67.93 KB (🟡 +1.41 KB) 161.85 KB
/blog/2013/06/19/community-roundup-2 68.59 KB (🟡 +1.4 KB) 162.51 KB
/blog/2013/06/21/react-v0-3-3 66.64 KB (🟡 +1.4 KB) 160.56 KB
/blog/2013/06/27/community-roundup-3 68.96 KB (🟡 +1.41 KB) 162.88 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 67.26 KB (🟡 +1.41 KB) 161.18 KB
/blog/2013/07/03/community-roundup-4 68.33 KB (🟡 +1.41 KB) 162.25 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 67.13 KB (🟡 +1.4 KB) 161.05 KB
/blog/2013/07/17/react-v0-4-0 67.84 KB (🟡 +1.41 KB) 161.76 KB
/blog/2013/07/23/community-roundup-5 68.72 KB (🟡 +1.41 KB) 162.64 KB
/blog/2013/07/26/react-v0-4-1 66.61 KB (🟡 +1.41 KB) 160.53 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 67.21 KB (🟡 +1.4 KB) 161.13 KB
/blog/2013/08/05/community-roundup-6 68.01 KB (🟡 +1.41 KB) 161.93 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 67.22 KB (🟡 +1.41 KB) 161.14 KB
/blog/2013/08/26/community-roundup-7 68.19 KB (🟡 +1.41 KB) 162.11 KB
/blog/2013/09/24/community-roundup-8 69.62 KB (🟡 +1.41 KB) 163.54 KB
/blog/2013/10/03/community-roundup-9 68.55 KB (🟡 +1.41 KB) 162.47 KB
/blog/2013/10/16/react-v0.5.0 68.24 KB (🟡 +1.41 KB) 162.16 KB
/blog/2013/10/29/react-v0-5-1 66.6 KB (🟡 +1.41 KB) 160.52 KB
/blog/2013/11/06/community-roundup-10 70.21 KB (🟡 +1.41 KB) 164.13 KB
/blog/2013/11/18/community-roundup-11 69.29 KB (🟡 +1.41 KB) 163.21 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 67.07 KB (🟡 +1.41 KB) 160.99 KB
/blog/2013/12/19/react-v0.8.0 67.49 KB (🟡 +1.41 KB) 161.41 KB
/blog/2013/12/23/community-roundup-12 68.95 KB (🟡 +1.41 KB) 162.87 KB
/blog/2013/12/30/community-roundup-13 68.73 KB (🟡 +1.41 KB) 162.65 KB
/blog/2014/01/02/react-chrome-developer-tools 66.99 KB (🟡 +1.41 KB) 160.91 KB
/blog/2014/01/06/community-roundup-14 68.32 KB (🟡 +1.41 KB) 162.24 KB
/blog/2014/02/05/community-roundup-15 69.54 KB (🟡 +1.41 KB) 163.46 KB
/blog/2014/02/15/community-roundup-16 69.25 KB (🟡 +1.41 KB) 163.17 KB
/blog/2014/02/16/react-v0.9-rc1 69.66 KB (🟡 +1.41 KB) 163.58 KB
/blog/2014/02/20/react-v0.9 70.1 KB (🟡 +1.41 KB) 164.02 KB
/blog/2014/02/24/community-roundup-17 68.97 KB (🟡 +1.41 KB) 162.89 KB
/blog/2014/03/14/community-roundup-18 69.93 KB (🟡 +1.41 KB) 163.85 KB
/blog/2014/03/19/react-v0.10-rc1 68.24 KB (🟡 +1.41 KB) 162.16 KB
/blog/2014/03/21/react-v0.10 68.27 KB (🟡 +1.41 KB) 162.19 KB
/blog/2014/03/28/the-road-to-1.0 68.38 KB (🟡 +1.41 KB) 162.3 KB
/blog/2014/04/04/reactnet 67.02 KB (🟡 +1.41 KB) 160.94 KB
/blog/2014/05/06/flux 67.15 KB (🟡 +1.41 KB) 161.07 KB
/blog/2014/05/29/one-year-of-open-source-react 67.37 KB (🟡 +1.41 KB) 161.29 KB
/blog/2014/06/27/community-roundup-19 68.91 KB (🟡 +1.41 KB) 162.83 KB
/blog/2014/07/13/react-v0.11-rc1 69.29 KB (🟡 +1.4 KB) 163.21 KB
/blog/2014/07/17/react-v0.11 70.55 KB (🟡 +1.4 KB) 164.47 KB
/blog/2014/07/25/react-v0.11.1 67.5 KB (🟡 +1.41 KB) 161.42 KB
/blog/2014/07/28/community-roundup-20 69.06 KB (🟡 +1.41 KB) 162.98 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 68.69 KB (🟡 +1.41 KB) 162.61 KB
/blog/2014/08/03/community-roundup-21 68.72 KB (🟡 +1.41 KB) 162.64 KB
/blog/2014/09/03/introducing-the-jsx-specification 66.73 KB (🟡 +1.4 KB) 160.65 KB
/blog/2014/09/12/community-round-up-22 69.2 KB (🟡 +1.41 KB) 163.12 KB
/blog/2014/09/16/react-v0.11.2 67.5 KB (🟡 +1.4 KB) 161.42 KB
/blog/2014/09/24/testing-flux-applications 70.68 KB (🟡 +1.41 KB) 164.6 KB
/blog/2014/10/14/introducing-react-elements 69.63 KB (🟡 +1.41 KB) 163.55 KB
/blog/2014/10/16/react-v0.12-rc1 69.6 KB (🟡 +1.41 KB) 163.52 KB
/blog/2014/10/17/community-roundup-23 70.17 KB (🟡 +1.4 KB) 164.09 KB
/blog/2014/10/27/react-js-conf 66.77 KB (🟡 +1.4 KB) 160.69 KB
/blog/2014/10/28/react-v0.12 69.54 KB (🟡 +1.41 KB) 163.46 KB
/blog/2014/11/24/react-js-conf-updates 67.16 KB (🟡 +1.41 KB) 161.08 KB
/blog/2014/11/25/community-roundup-24 70.4 KB (🟡 +1.41 KB) 164.32 KB
/blog/2014/12/18/react-v0.12.2 67.19 KB (🟡 +1.41 KB) 161.11 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 67.58 KB (🟡 +1.41 KB) 161.5 KB
/blog/2015/01/27/react-v0.13.0-beta-1 68.55 KB (🟡 +1.41 KB) 162.47 KB
/blog/2015/02/18/react-conf-roundup-2015 70.54 KB (🟡 +1.41 KB) 164.46 KB
/blog/2015/02/20/introducing-relay-and-graphql 69.69 KB (🟡 +1.41 KB) 163.61 KB
/blog/2015/02/24/react-v0.13-rc1 68.59 KB (🟡 +1.41 KB) 162.51 KB
/blog/2015/02/24/streamlining-react-elements 71.14 KB (🟡 +1.4 KB) 165.06 KB
/blog/2015/03/03/react-v0.13-rc2 67.92 KB (🟡 +1.41 KB) 161.84 KB
/blog/2015/03/04/community-roundup-25 68.89 KB (🟡 +1.41 KB) 162.81 KB
/blog/2015/03/10/react-v0.13 69.2 KB (🟡 +1.41 KB) 163.12 KB
/blog/2015/03/16/react-v0.13.1 67.02 KB (🟡 +1.41 KB) 160.94 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 69.78 KB (🟡 +1.41 KB) 163.7 KB
/blog/2015/03/26/introducing-react-native 66.92 KB (🟡 +1.41 KB) 160.84 KB
/blog/2015/03/30/community-roundup-26 68.85 KB (🟡 +1.41 KB) 162.77 KB
/blog/2015/04/17/react-native-v0.4 67.77 KB (🟡 +1.41 KB) 161.69 KB
/blog/2015/04/18/react-v0.13.2 67.1 KB (🟡 +1.41 KB) 161.02 KB
/blog/2015/05/01/graphql-introduction 71.59 KB (🟡 +1.41 KB) 165.51 KB
/blog/2015/05/08/react-v0.13.3 66.99 KB (🟡 +1.41 KB) 160.91 KB
/blog/2015/05/22/react-native-release-process 67.14 KB (🟡 +1.41 KB) 161.06 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 67.59 KB (🟡 +1.41 KB) 161.51 KB
/blog/2015/07/03/react-v0.14-beta-1 69.1 KB (🟡 +1.4 KB) 163.02 KB
/blog/2015/08/03/new-react-devtools-beta 67.71 KB (🟡 +1.41 KB) 161.63 KB
/blog/2015/08/11/relay-technical-preview 67.77 KB (🟡 +1.41 KB) 161.69 KB
/blog/2015/08/13/reacteurope-roundup 69.36 KB (🟡 +1.41 KB) 163.28 KB
/blog/2015/09/02/new-react-developer-tools 67.12 KB (🟡 +1.41 KB) 161.04 KB
/blog/2015/09/10/react-v0.14-rc1 72.81 KB (🟡 +1.41 KB) 166.73 KB
/blog/2015/09/14/community-roundup-27 69.28 KB (🟡 +1.41 KB) 163.2 KB
/blog/2015/10/01/react-render-and-top-level-api 68.25 KB (🟡 +1.4 KB) 162.17 KB
/blog/2015/10/07/react-v0.14 73.29 KB (🟡 +1.41 KB) 167.21 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 69 KB (🟡 +1.41 KB) 162.92 KB
/blog/2015/10/28/react-v0.14.1 67.01 KB (🟡 +1.41 KB) 160.93 KB
/blog/2015/11/02/react-v0.14.2 67.04 KB (🟡 +1.41 KB) 160.96 KB
/blog/2015/11/18/react-v0.14.3 67.17 KB (🟡 +1.41 KB) 161.09 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 68.04 KB (🟡 +1.41 KB) 161.96 KB
/blog/2015/12/16/ismounted-antipattern 67.64 KB (🟡 +1.41 KB) 161.56 KB
/blog/2015/12/18/react-components-elements-and-instances 71.56 KB (🟡 +1.41 KB) 165.48 KB
/blog/2015/12/29/react-v0.14.4 66.84 KB (🟡 +1.41 KB) 160.76 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 67.85 KB (🟡 +1.41 KB) 161.77 KB
/blog/2016/01/12/discontinuing-ie8-support 66.66 KB (🟡 +1.41 KB) 160.58 KB
/blog/2016/02/19/new-versioning-scheme 68.04 KB (🟡 +1.41 KB) 161.96 KB
/blog/2016/03/07/react-v15-rc1 70.79 KB (🟡 +1.41 KB) 164.71 KB
/blog/2016/03/16/react-v15-rc2 67.66 KB (🟡 +1.41 KB) 161.58 KB
/blog/2016/03/29/react-v0.14.8 66.79 KB (🟡 +1.41 KB) 160.71 KB
/blog/2016/04/07/react-v15 74.98 KB (🟡 +1.41 KB) 168.9 KB
/blog/2016/04/08/react-v15.0.1 67.55 KB (🟡 +1.41 KB) 161.47 KB
/blog/2016/07/11/introducing-reacts-error-code-system 67.26 KB (🟡 +1.41 KB) 161.18 KB
/blog/2016/07/13/mixins-considered-harmful 75.41 KB (🟡 +1.41 KB) 169.33 KB
/blog/2016/07/22/create-apps-with-no-configuration 70.74 KB (🟡 +1.41 KB) 164.66 KB
/blog/2016/08/05/relay-state-of-the-state 70.78 KB (🟡 +1.41 KB) 164.7 KB
/blog/2016/09/28/our-first-50000-stars 72.23 KB (🟡 +1.41 KB) 166.15 KB
/blog/2016/11/16/react-v15.4.0 70.18 KB (🟡 +1.4 KB) 164.1 KB
/blog/2017/04/07/react-v15.5.0 70.74 KB (🟡 +1.41 KB) 164.66 KB
/blog/2017/05/18/whats-new-in-create-react-app 70.14 KB (🟡 +1.41 KB) 164.06 KB
/blog/2017/06/13/react-v15.6.0 68.76 KB (🟡 +1.41 KB) 162.68 KB
/blog/2017/07/26/error-handling-in-react-16 69.11 KB (🟡 +1.41 KB) 163.03 KB
/blog/2017/09/08/dom-attributes-in-react-16 69.54 KB (🟡 +1.41 KB) 163.46 KB
/blog/2017/09/25/react-v15.6.2 67.88 KB (🟡 +1.4 KB) 161.8 KB
/blog/2017/09/26/react-v16.0 73.01 KB (🟡 +1.41 KB) 166.93 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 70.94 KB (🟡 +1.41 KB) 164.86 KB
/blog/2017/12/07/introducing-the-react-rfc-process 67.46 KB (🟡 +1.41 KB) 161.38 KB
/blog/2017/12/15/improving-the-repository-infrastructure 83.25 KB (🟡 +1.4 KB) 177.17 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 67.42 KB (🟡 +1.41 KB) 161.34 KB
/blog/2018/03/27/update-on-async-rendering 72.66 KB (🟡 +1.41 KB) 166.58 KB
/blog/2018/03/29/react-v-16-3 69.48 KB (🟡 +1.41 KB) 163.4 KB
/blog/2018/05/23/react-v-16-4 69.62 KB (🟡 +1.41 KB) 163.54 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 73.28 KB (🟡 +1.41 KB) 167.2 KB
/blog/2018/08/01/react-v-16-4-2 68.27 KB (🟡 +1.41 KB) 162.19 KB
/blog/2018/09/10/introducing-the-react-profiler 69.88 KB (🟡 +1.41 KB) 163.8 KB
/blog/2018/10/01/create-react-app-v2 70.36 KB (🟡 +1.41 KB) 164.28 KB
/blog/2018/10/23/react-v-16-6 69.56 KB (🟡 +1.41 KB) 163.48 KB
/blog/2018/11/13/react-conf-recap 67.27 KB (🟡 +1.41 KB) 161.19 KB
/blog/2018/11/27/react-16-roadmap 73.46 KB (🟡 +1.41 KB) 167.38 KB
/blog/2018/12/19/react-v-16-7 68.39 KB (🟡 +1.41 KB) 162.31 KB
/blog/2019/02/06/react-v16.8.0 70.66 KB (🟡 +1.41 KB) 164.58 KB
/blog/2019/02/23/is-react-translated-yet 70.22 KB (🟡 +1.4 KB) 164.14 KB
/blog/2019/08/08/react-v16.9.0 73.15 KB (🟡 +1.41 KB) 167.07 KB
/blog/2019/08/15/new-react-devtools 67.76 KB (🟡 +1.41 KB) 161.68 KB
/blog/2019/10/22/react-release-channels 69.58 KB (🟡 +1.4 KB) 163.5 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 74.27 KB (🟡 +1.41 KB) 168.19 KB
/blog/2020/02/26/react-v16.13.0 70.5 KB (🟡 +1.41 KB) 164.42 KB
/blog/2020/08/10/react-v17-rc 76.78 KB (🟡 +1.41 KB) 170.7 KB
/blog/all 57.58 KB (🟡 +380 B) 151.5 KB
/community 55.83 KB (🟡 +1.44 KB) 149.75 KB
/community/acknowledgements 57.03 KB (🟡 +1.44 KB) 150.95 KB
/community/meet-the-team 57.72 KB (🟡 +1.44 KB) 151.64 KB
/learn 60.79 KB (🟡 +1.44 KB) 154.71 KB
/learn/add-react-to-a-website 60.92 KB (🟡 +1.44 KB) 154.83 KB
/learn/adding-interactivity 62.48 KB (🟡 +1.45 KB) 156.4 KB
/learn/choosing-the-state-structure 68.2 KB (🟡 +1.44 KB) 162.12 KB
/learn/conditional-rendering 60.44 KB (🟡 +1.44 KB) 154.36 KB
/learn/describing-the-ui 59.65 KB (🟡 +1.44 KB) 153.57 KB
/learn/editor-setup 57.12 KB (🟡 +1.44 KB) 151.04 KB
/learn/escape-hatches 55.17 KB (🟡 +1.44 KB) 149.09 KB
/learn/extracting-state-logic-into-a-reducer 65.84 KB (🟡 +1.44 KB) 159.76 KB
/learn/importing-and-exporting-components 58.83 KB (🟡 +1.44 KB) 152.75 KB
/learn/installation 56.44 KB (🟡 +1.44 KB) 150.36 KB
/learn/javascript-in-jsx-with-curly-braces 58.91 KB (🟡 +1.45 KB) 152.83 KB
/learn/keeping-components-pure 63.04 KB (🟡 +1.45 KB) 156.96 KB
/learn/managing-state 61.77 KB (🟡 +1.44 KB) 155.69 KB
/learn/manipulating-the-dom-with-refs 64.01 KB (🟡 +1.44 KB) 157.93 KB
/learn/passing-data-deeply-with-context 63.57 KB (🟡 +1.44 KB) 157.49 KB
/learn/passing-props-to-a-component 62.61 KB (🟡 +1.44 KB) 156.53 KB
/learn/preserving-and-resetting-state 66.58 KB (🟡 +1.45 KB) 160.5 KB
/learn/queueing-a-series-of-state-updates 60.41 KB (🟡 +1.44 KB) 154.33 KB
/learn/react-developer-tools 56.4 KB (🟡 +1.44 KB) 150.32 KB
/learn/reacting-to-input-with-state 65.02 KB (🟡 +1.45 KB) 158.94 KB
/learn/referencing-values-with-refs 61.92 KB (🟡 +1.44 KB) 155.84 KB
/learn/render-and-commit 58.9 KB (🟡 +1.44 KB) 152.82 KB
/learn/rendering-lists 62.99 KB (🟡 +1.44 KB) 156.91 KB
/learn/responding-to-events 61.93 KB (🟡 +1.44 KB) 155.85 KB
/learn/scaling-up-with-reducer-and-context 59.98 KB (🟡 +1.44 KB) 153.9 KB
/learn/sharing-state-between-components 61.06 KB (🟡 +1.45 KB) 154.98 KB
/learn/start-a-new-react-project 57.45 KB (🟡 +1.44 KB) 151.37 KB
/learn/state-a-components-memory 66.13 KB (🟡 +1.44 KB) 160.05 KB
/learn/state-as-a-snapshot 59.71 KB (🟡 +1.44 KB) 153.63 KB
/learn/thinking-in-react 61.77 KB (🟡 +1.45 KB) 155.69 KB
/learn/updating-arrays-in-state 64 KB (🟡 +1.44 KB) 157.92 KB
/learn/updating-objects-in-state 63.74 KB (🟡 +1.44 KB) 157.66 KB
/learn/writing-markup-with-jsx 59.15 KB (🟡 +1.45 KB) 153.07 KB
/learn/your-first-component 59.74 KB (🟡 +1.45 KB) 153.66 KB
Details

Only 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 next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

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.

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

Successfully merging this pull request may close these issues.

2 participants