Skip to content

[Beta] Reorder API sections#4328

Merged
gaearon merged 2 commits intomainfrom
reorder
Feb 16, 2022
Merged

[Beta] Reorder API sections#4328
gaearon merged 2 commits intomainfrom
reorder

Conversation

@gaearon
Copy link
Copy Markdown
Member

@gaearon gaearon commented Feb 12, 2022

What if we put the usage first, and the reference second? I've noticed Apple docs do this and it seems nice. Curious to get more opinions on which version you prefer. I also flipped around the "code vs explanations" blocks horizontally so that code is always on the left side. I think this makes vertical scanning less jarring.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Feb 12, 2022

Size Changes

Details

📦 Next.js Bundle Analysis

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

🎉 Global Bundle Size Decreased

Page Size (compressed)
global 93.33 KB (-3 B)
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 Eighty-three Pages Changed Size

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

Page Size (compressed) First Load
/ 218.14 KB (🟡 +173 B) 311.48 KB
/404 217.26 KB (🟡 +173 B) 310.59 KB
/apis 217.8 KB (🟡 +180 B) 311.14 KB
/apis/reactdom 217.95 KB (🟡 +186 B) 311.29 KB
/apis/render 220.02 KB (🟡 +218 B) 313.35 KB
/apis/usestate 228.96 KB (🟡 +1.1 KB) 322.3 KB
/blog/2013/06/02/jsfiddle-integration 228.52 KB (🟡 +173 B) 321.86 KB
/blog/2013/06/05/why-react 230.25 KB (🟡 +173 B) 323.58 KB
/blog/2013/06/12/community-roundup 229.95 KB (🟡 +173 B) 323.29 KB
/blog/2013/06/19/community-roundup-2 230.62 KB (🟡 +173 B) 323.95 KB
/blog/2013/06/21/react-v0-3-3 228.67 KB (🟡 +173 B) 322 KB
/blog/2013/06/27/community-roundup-3 230.99 KB (🟡 +173 B) 324.32 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 229.29 KB (🟡 +173 B) 322.62 KB
/blog/2013/07/03/community-roundup-4 230.36 KB (🟡 +173 B) 323.69 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 229.16 KB (🟡 +173 B) 322.49 KB
/blog/2013/07/17/react-v0-4-0 229.87 KB (🟡 +173 B) 323.2 KB
/blog/2013/07/23/community-roundup-5 230.75 KB (🟡 +173 B) 324.08 KB
/blog/2013/07/26/react-v0-4-1 228.63 KB (🟡 +173 B) 321.97 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 229.24 KB (🟡 +173 B) 322.57 KB
/blog/2013/08/05/community-roundup-6 230.04 KB (🟡 +173 B) 323.38 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 229.25 KB (🟡 +173 B) 322.58 KB
/blog/2013/08/26/community-roundup-7 230.21 KB (🟡 +173 B) 323.55 KB
/blog/2013/09/24/community-roundup-8 231.65 KB (🟡 +173 B) 324.98 KB
/blog/2013/10/03/community-roundup-9 230.58 KB (🟡 +173 B) 323.91 KB
/blog/2013/10/16/react-v0.5.0 230.26 KB (🟡 +173 B) 323.6 KB
/blog/2013/10/29/react-v0-5-1 228.62 KB (🟡 +173 B) 321.96 KB
/blog/2013/11/06/community-roundup-10 232.24 KB (🟡 +173 B) 325.58 KB
/blog/2013/11/18/community-roundup-11 231.32 KB (🟡 +173 B) 324.65 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 229.09 KB (🟡 +173 B) 322.43 KB
/blog/2013/12/19/react-v0.8.0 229.52 KB (🟡 +173 B) 322.85 KB
/blog/2013/12/23/community-roundup-12 230.97 KB (🟡 +173 B) 324.31 KB
/blog/2013/12/30/community-roundup-13 230.76 KB (🟡 +173 B) 324.09 KB
/blog/2014/01/02/react-chrome-developer-tools 229.01 KB (🟡 +173 B) 322.35 KB
/blog/2014/01/06/community-roundup-14 230.35 KB (🟡 +173 B) 323.69 KB
/blog/2014/02/05/community-roundup-15 231.57 KB (🟡 +173 B) 324.9 KB
/blog/2014/02/15/community-roundup-16 231.28 KB (🟡 +173 B) 324.61 KB
/blog/2014/02/16/react-v0.9-rc1 231.69 KB (🟡 +173 B) 325.02 KB
/blog/2014/02/20/react-v0.9 232.13 KB (🟡 +173 B) 325.46 KB
/blog/2014/02/24/community-roundup-17 231 KB (🟡 +173 B) 324.33 KB
/blog/2014/03/14/community-roundup-18 231.96 KB (🟡 +173 B) 325.29 KB
/blog/2014/03/19/react-v0.10-rc1 230.27 KB (🟡 +173 B) 323.6 KB
/blog/2014/03/21/react-v0.10 230.29 KB (🟡 +173 B) 323.63 KB
/blog/2014/03/28/the-road-to-1.0 230.4 KB (🟡 +173 B) 323.74 KB
/blog/2014/04/04/reactnet 229.05 KB (🟡 +173 B) 322.38 KB
/blog/2014/05/06/flux 229.17 KB (🟡 +173 B) 322.5 KB
/blog/2014/05/29/one-year-of-open-source-react 229.4 KB (🟡 +173 B) 322.73 KB
/blog/2014/06/27/community-roundup-19 230.94 KB (🟡 +173 B) 324.27 KB
/blog/2014/07/13/react-v0.11-rc1 231.32 KB (🟡 +173 B) 324.66 KB
/blog/2014/07/17/react-v0.11 232.58 KB (🟡 +173 B) 325.92 KB
/blog/2014/07/25/react-v0.11.1 229.53 KB (🟡 +173 B) 322.86 KB
/blog/2014/07/28/community-roundup-20 231.08 KB (🟡 +173 B) 324.42 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 230.72 KB (🟡 +173 B) 324.05 KB
/blog/2014/08/03/community-roundup-21 230.75 KB (🟡 +173 B) 324.08 KB
/blog/2014/09/03/introducing-the-jsx-specification 228.76 KB (🟡 +173 B) 322.09 KB
/blog/2014/09/12/community-round-up-22 231.23 KB (🟡 +173 B) 324.57 KB
/blog/2014/09/16/react-v0.11.2 229.53 KB (🟡 +173 B) 322.86 KB
/blog/2014/09/24/testing-flux-applications 232.71 KB (🟡 +173 B) 326.04 KB
/blog/2014/10/14/introducing-react-elements 231.66 KB (🟡 +173 B) 325 KB
/blog/2014/10/16/react-v0.12-rc1 231.63 KB (🟡 +173 B) 324.96 KB
/blog/2014/10/17/community-roundup-23 232.2 KB (🟡 +173 B) 325.53 KB
/blog/2014/10/27/react-js-conf 228.8 KB (🟡 +173 B) 322.13 KB
/blog/2014/10/28/react-v0.12 231.57 KB (🟡 +173 B) 324.9 KB
/blog/2014/11/24/react-js-conf-updates 229.19 KB (🟡 +173 B) 322.52 KB
/blog/2014/11/25/community-roundup-24 232.43 KB (🟡 +173 B) 325.76 KB
/blog/2014/12/18/react-v0.12.2 229.21 KB (🟡 +173 B) 322.55 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 229.61 KB (🟡 +173 B) 322.94 KB
/blog/2015/01/27/react-v0.13.0-beta-1 230.58 KB (🟡 +173 B) 323.91 KB
/blog/2015/02/18/react-conf-roundup-2015 232.56 KB (🟡 +173 B) 325.9 KB
/blog/2015/02/20/introducing-relay-and-graphql 231.71 KB (🟡 +173 B) 325.05 KB
/blog/2015/02/24/react-v0.13-rc1 230.62 KB (🟡 +173 B) 323.95 KB
/blog/2015/02/24/streamlining-react-elements 233.17 KB (🟡 +173 B) 326.5 KB
/blog/2015/03/03/react-v0.13-rc2 229.95 KB (🟡 +173 B) 323.29 KB
/blog/2015/03/04/community-roundup-25 230.91 KB (🟡 +173 B) 324.25 KB
/blog/2015/03/10/react-v0.13 231.23 KB (🟡 +173 B) 324.57 KB
/blog/2015/03/16/react-v0.13.1 229.05 KB (🟡 +173 B) 322.38 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 231.81 KB (🟡 +173 B) 325.14 KB
/blog/2015/03/26/introducing-react-native 228.95 KB (🟡 +173 B) 322.28 KB
/blog/2015/03/30/community-roundup-26 230.88 KB (🟡 +173 B) 324.21 KB
/blog/2015/04/17/react-native-v0.4 229.79 KB (🟡 +173 B) 323.13 KB
/blog/2015/04/18/react-v0.13.2 229.13 KB (🟡 +173 B) 322.46 KB
/blog/2015/05/01/graphql-introduction 233.62 KB (🟡 +173 B) 326.95 KB
/blog/2015/05/08/react-v0.13.3 229.02 KB (🟡 +173 B) 322.35 KB
/blog/2015/05/22/react-native-release-process 229.17 KB (🟡 +173 B) 322.5 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 229.62 KB (🟡 +173 B) 322.95 KB
/blog/2015/07/03/react-v0.14-beta-1 231.13 KB (🟡 +173 B) 324.47 KB
/blog/2015/08/03/new-react-devtools-beta 229.73 KB (🟡 +173 B) 323.07 KB
/blog/2015/08/11/relay-technical-preview 229.79 KB (🟡 +173 B) 323.13 KB
/blog/2015/08/13/reacteurope-roundup 231.39 KB (🟡 +173 B) 324.72 KB
/blog/2015/09/02/new-react-developer-tools 229.15 KB (🟡 +173 B) 322.48 KB
/blog/2015/09/10/react-v0.14-rc1 234.83 KB (🟡 +173 B) 328.17 KB
/blog/2015/09/14/community-roundup-27 231.31 KB (🟡 +173 B) 324.64 KB
/blog/2015/10/01/react-render-and-top-level-api 230.28 KB (🟡 +173 B) 323.62 KB
/blog/2015/10/07/react-v0.14 235.32 KB (🟡 +173 B) 328.65 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 231.03 KB (🟡 +173 B) 324.37 KB
/blog/2015/10/28/react-v0.14.1 229.04 KB (🟡 +173 B) 322.38 KB
/blog/2015/11/02/react-v0.14.2 229.07 KB (🟡 +173 B) 322.4 KB
/blog/2015/11/18/react-v0.14.3 229.19 KB (🟡 +173 B) 322.53 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 230.07 KB (🟡 +173 B) 323.4 KB
/blog/2015/12/16/ismounted-antipattern 229.67 KB (🟡 +173 B) 323 KB
/blog/2015/12/18/react-components-elements-and-instances 233.59 KB (🟡 +173 B) 326.92 KB
/blog/2015/12/29/react-v0.14.4 228.86 KB (🟡 +173 B) 322.2 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 229.88 KB (🟡 +173 B) 323.21 KB
/blog/2016/01/12/discontinuing-ie8-support 228.69 KB (🟡 +173 B) 322.02 KB
/blog/2016/02/19/new-versioning-scheme 230.07 KB (🟡 +173 B) 323.4 KB
/blog/2016/03/07/react-v15-rc1 232.82 KB (🟡 +173 B) 326.15 KB
/blog/2016/03/16/react-v15-rc2 229.68 KB (🟡 +173 B) 323.02 KB
/blog/2016/03/29/react-v0.14.8 228.82 KB (🟡 +173 B) 322.15 KB
/blog/2016/04/07/react-v15 237.01 KB (🟡 +173 B) 330.34 KB
/blog/2016/04/08/react-v15.0.1 229.58 KB (🟡 +173 B) 322.91 KB
/blog/2016/07/11/introducing-reacts-error-code-system 229.29 KB (🟡 +173 B) 322.62 KB
/blog/2016/07/13/mixins-considered-harmful 237.44 KB (🟡 +173 B) 330.77 KB
/blog/2016/07/22/create-apps-with-no-configuration 232.77 KB (🟡 +173 B) 326.1 KB
/blog/2016/08/05/relay-state-of-the-state 232.81 KB (🟡 +173 B) 326.14 KB
/blog/2016/09/28/our-first-50000-stars 234.25 KB (🟡 +173 B) 327.59 KB
/blog/2016/11/16/react-v15.4.0 232.21 KB (🟡 +173 B) 325.54 KB
/blog/2017/04/07/react-v15.5.0 232.77 KB (🟡 +173 B) 326.11 KB
/blog/2017/05/18/whats-new-in-create-react-app 232.17 KB (🟡 +173 B) 325.5 KB
/blog/2017/06/13/react-v15.6.0 230.79 KB (🟡 +173 B) 324.12 KB
/blog/2017/07/26/error-handling-in-react-16 231.14 KB (🟡 +173 B) 324.47 KB
/blog/2017/09/08/dom-attributes-in-react-16 231.57 KB (🟡 +173 B) 324.9 KB
/blog/2017/09/25/react-v15.6.2 229.91 KB (🟡 +173 B) 323.24 KB
/blog/2017/09/26/react-v16.0 235.03 KB (🟡 +173 B) 328.37 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 232.97 KB (🟡 +173 B) 326.3 KB
/blog/2017/12/07/introducing-the-react-rfc-process 229.49 KB (🟡 +173 B) 322.82 KB
/blog/2017/12/15/improving-the-repository-infrastructure 245.28 KB (🟡 +173 B) 338.61 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 229.44 KB (🟡 +173 B) 322.78 KB
/blog/2018/03/27/update-on-async-rendering 234.68 KB (🟡 +173 B) 328.02 KB
/blog/2018/03/29/react-v-16-3 231.5 KB (🟡 +173 B) 324.84 KB
/blog/2018/05/23/react-v-16-4 231.64 KB (🟡 +173 B) 324.98 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 235.3 KB (🟡 +173 B) 328.64 KB
/blog/2018/08/01/react-v-16-4-2 230.3 KB (🟡 +173 B) 323.63 KB
/blog/2018/09/10/introducing-the-react-profiler 231.91 KB (🟡 +173 B) 325.24 KB
/blog/2018/10/01/create-react-app-v2 232.38 KB (🟡 +173 B) 325.72 KB
/blog/2018/10/23/react-v-16-6 231.58 KB (🟡 +173 B) 324.92 KB
/blog/2018/11/13/react-conf-recap 229.3 KB (🟡 +173 B) 322.63 KB
/blog/2018/11/27/react-16-roadmap 235.49 KB (🟡 +173 B) 328.82 KB
/blog/2018/12/19/react-v-16-7 230.42 KB (🟡 +173 B) 323.75 KB
/blog/2019/02/06/react-v16.8.0 232.68 KB (🟡 +173 B) 326.02 KB
/blog/2019/02/23/is-react-translated-yet 232.25 KB (🟡 +173 B) 325.58 KB
/blog/2019/08/08/react-v16.9.0 235.18 KB (🟡 +173 B) 328.51 KB
/blog/2019/08/15/new-react-devtools 229.79 KB (🟡 +173 B) 323.12 KB
/blog/2019/10/22/react-release-channels 231.6 KB (🟡 +173 B) 324.93 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 236.3 KB (🟡 +173 B) 329.63 KB
/blog/2020/02/26/react-v16.13.0 232.53 KB (🟡 +173 B) 325.86 KB
/blog/2020/08/10/react-v17-rc 238.81 KB (🟡 +173 B) 332.14 KB
/community 217.84 KB (🟡 +173 B) 311.17 KB
/community/acknowledgements 219.03 KB (🟡 +173 B) 312.37 KB
/community/meet-the-team 219.55 KB (🟡 +173 B) 312.88 KB
/learn 222.34 KB (🟡 +173 B) 315.67 KB
/learn/add-react-to-a-website 222.66 KB (🟡 +173 B) 316 KB
/learn/adding-interactivity 224.47 KB (🟡 +173 B) 317.8 KB
/learn/choosing-the-state-structure 230.2 KB (🟡 +173 B) 323.54 KB
/learn/conditional-rendering 222.44 KB (🟡 +173 B) 315.77 KB
/learn/describing-the-ui 221.66 KB (🟡 +173 B) 314.99 KB
/learn/editor-setup 218.93 KB (🟡 +173 B) 312.26 KB
/learn/escape-hatches 217.17 KB (🟡 +173 B) 310.5 KB
/learn/extracting-state-logic-into-a-reducer 227.84 KB (🟡 +173 B) 321.17 KB
/learn/importing-and-exporting-components 220.84 KB (🟡 +173 B) 314.17 KB
/learn/installation 218.5 KB (🟡 +173 B) 311.83 KB
/learn/javascript-in-jsx-with-curly-braces 220.91 KB (🟡 +173 B) 314.25 KB
/learn/keeping-components-pure 225.04 KB (🟡 +173 B) 318.38 KB
/learn/managing-state 223.77 KB (🟡 +173 B) 317.1 KB
/learn/manipulating-the-dom-with-refs 225.68 KB (🟡 +173 B) 319.01 KB
/learn/passing-data-deeply-with-context 225.18 KB (🟡 +173 B) 318.52 KB
/learn/passing-props-to-a-component 224.62 KB (🟡 +173 B) 317.95 KB
/learn/preserving-and-resetting-state 227.43 KB (🟡 +173 B) 320.76 KB
/learn/queueing-a-series-of-state-updates 222.41 KB (🟡 +173 B) 315.74 KB
/learn/react-developer-tools 218.36 KB (🟡 +173 B) 311.7 KB
/learn/reacting-to-input-with-state 226.88 KB (🟡 +173 B) 320.22 KB
/learn/referencing-values-with-refs 223.93 KB (🟡 +173 B) 317.26 KB
/learn/render-and-commit 220.9 KB (🟡 +173 B) 314.24 KB
/learn/rendering-lists 224.96 KB (🟡 +173 B) 318.3 KB
/learn/responding-to-events 223.96 KB (🟡 +173 B) 317.29 KB
/learn/scaling-up-with-reducer-and-context 221.98 KB (🟡 +173 B) 315.32 KB
/learn/sharing-state-between-components 222.69 KB (🟡 +173 B) 316.02 KB
/learn/start-a-new-react-project 219.33 KB (🟡 +173 B) 312.67 KB
/learn/state-a-components-memory 228.13 KB (🟡 +173 B) 321.47 KB
/learn/state-as-a-snapshot 221.96 KB (🟡 +173 B) 315.29 KB
/learn/thinking-in-react 223.78 KB (🟡 +173 B) 317.11 KB
/learn/updating-arrays-in-state 226.01 KB (🟡 +173 B) 319.35 KB
/learn/updating-objects-in-state 225.74 KB (🟡 +173 B) 319.07 KB
/learn/writing-markup-with-jsx 220.84 KB (🟡 +173 B) 314.17 KB
/learn/your-first-component 221.74 KB (🟡 +173 B) 315.08 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