Skip to content

Conversation

@ScytheDraven47
Copy link

As brought up in feedback by me

Fixing a bug on the Challenges/Navigation component wherein the state scrollPos was not updated if the active challenge was changed from outside the navigation. (Possible via the "Next Challenge" button below the challenge).

The fix was to remove the state entirely, and refactor into a variable based on the activeChallenge prop, so it could be maintained on re-render.

Tested on pages with 1 challenge, and multiple challenges, spamming button clicks, and using all means of navigation (e.g. <, >, "Next Challenge", and challenge names)

@facebook-github-bot
Copy link
Collaborator

Hi @ScytheDraven47!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@github-actions
Copy link

github-actions bot commented Nov 25, 2021

Size Changes

📦 Next.js Bundle Analysis

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

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 91.32 KB (🟡 +156 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-five Pages Changed Size

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

Page Size (compressed) First Load
/ 203.57 KB (🟡 +430 B) 294.89 KB
/404 202.68 KB (🟡 +440 B) 294 KB
/blog 37.28 KB (🟢 -643 B) 128.6 KB
/blog/2013/06/02/jsfiddle-integration 213.69 KB (🟢 -155 B) 305.01 KB
/blog/2013/06/05/why-react 215.42 KB (🟢 -160 B) 306.74 KB
/blog/2013/06/12/community-roundup 215.12 KB (🟢 -157 B) 306.44 KB
/blog/2013/06/19/community-roundup-2 215.79 KB (🟢 -158 B) 307.11 KB
/blog/2013/06/21/react-v0-3-3 213.84 KB (🟢 -157 B) 305.16 KB
/blog/2013/06/27/community-roundup-3 216.15 KB (🟢 -159 B) 307.48 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 214.46 KB (🟢 -154 B) 305.78 KB
/blog/2013/07/03/community-roundup-4 215.52 KB (🟢 -158 B) 306.85 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 214.33 KB (🟢 -157 B) 305.65 KB
/blog/2013/07/17/react-v0-4-0 215.04 KB (🟢 -156 B) 306.36 KB
/blog/2013/07/23/community-roundup-5 215.92 KB (🟢 -156 B) 307.24 KB
/blog/2013/07/26/react-v0-4-1 213.8 KB (🟢 -155 B) 305.13 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 214.4 KB (🟢 -155 B) 305.73 KB
/blog/2013/08/05/community-roundup-6 215.21 KB (🟢 -159 B) 306.54 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 214.42 KB (🟢 -156 B) 305.74 KB
/blog/2013/08/26/community-roundup-7 215.38 KB (🟢 -157 B) 306.7 KB
/blog/2013/09/24/community-roundup-8 216.81 KB (🟢 -158 B) 308.14 KB
/blog/2013/10/03/community-roundup-9 215.75 KB (🟢 -161 B) 307.07 KB
/blog/2013/10/16/react-v0.5.0 215.43 KB (🟢 -159 B) 306.75 KB
/blog/2013/10/29/react-v0-5-1 213.79 KB (🟢 -158 B) 305.11 KB
/blog/2013/11/06/community-roundup-10 217.41 KB (🟢 -160 B) 308.73 KB
/blog/2013/11/18/community-roundup-11 216.49 KB (🟢 -157 B) 307.81 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 214.26 KB (🟢 -157 B) 305.58 KB
/blog/2013/12/19/react-v0.8.0 214.68 KB (🟢 -155 B) 306.01 KB
/blog/2013/12/23/community-roundup-12 216.14 KB (🟢 -157 B) 307.47 KB
/blog/2013/12/30/community-roundup-13 215.93 KB (🟢 -159 B) 307.25 KB
/blog/2014/01/02/react-chrome-developer-tools 214.18 KB (🟢 -156 B) 305.5 KB
/blog/2014/01/06/community-roundup-14 215.52 KB (🟢 -156 B) 306.84 KB
/blog/2014/02/05/community-roundup-15 216.74 KB (🟢 -155 B) 308.06 KB
/blog/2014/02/15/community-roundup-16 216.45 KB (🟢 -159 B) 307.77 KB
/blog/2014/02/16/react-v0.9-rc1 216.85 KB (🟢 -158 B) 308.18 KB
/blog/2014/02/20/react-v0.9 217.3 KB (🟢 -161 B) 308.62 KB
/blog/2014/02/24/community-roundup-17 216.16 KB (🟢 -160 B) 307.48 KB
/blog/2014/03/14/community-roundup-18 217.13 KB (🟢 -155 B) 308.45 KB
/blog/2014/03/19/react-v0.10-rc1 215.44 KB (🟢 -159 B) 306.76 KB
/blog/2014/03/21/react-v0.10 215.46 KB (🟢 -158 B) 306.78 KB
/blog/2014/03/28/the-road-to-1.0 215.57 KB (🟢 -159 B) 306.89 KB
/blog/2014/04/04/reactnet 214.21 KB (🟢 -158 B) 305.54 KB
/blog/2014/05/06/flux 214.34 KB (🟢 -154 B) 305.66 KB
/blog/2014/05/29/one-year-of-open-source-react 214.56 KB (🟢 -155 B) 305.89 KB
/blog/2014/06/27/community-roundup-19 216.11 KB (🟢 -162 B) 307.43 KB
/blog/2014/07/13/react-v0.11-rc1 216.49 KB (🟢 -157 B) 307.82 KB
/blog/2014/07/17/react-v0.11 217.75 KB (🟢 -160 B) 309.07 KB
/blog/2014/07/25/react-v0.11.1 214.7 KB (🟢 -157 B) 306.02 KB
/blog/2014/07/28/community-roundup-20 216.25 KB (🟢 -159 B) 307.57 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 215.88 KB (🟢 -156 B) 307.21 KB
/blog/2014/08/03/community-roundup-21 215.92 KB (🟢 -159 B) 307.24 KB
/blog/2014/09/03/introducing-the-jsx-specification 213.92 KB (🟢 -155 B) 305.25 KB
/blog/2014/09/12/community-round-up-22 216.4 KB (🟢 -155 B) 307.72 KB
/blog/2014/09/16/react-v0.11.2 214.69 KB (🟢 -156 B) 306.02 KB
/blog/2014/09/24/testing-flux-applications 217.87 KB (🟢 -159 B) 309.2 KB
/blog/2014/10/14/introducing-react-elements 216.83 KB (🟢 -159 B) 308.15 KB
/blog/2014/10/16/react-v0.12-rc1 216.79 KB (🟢 -160 B) 308.12 KB
/blog/2014/10/17/community-roundup-23 217.37 KB (🟢 -157 B) 308.69 KB
/blog/2014/10/27/react-js-conf 213.97 KB (🟢 -156 B) 305.29 KB
/blog/2014/10/28/react-v0.12 216.74 KB (🟢 -153 B) 308.06 KB
/blog/2014/11/24/react-js-conf-updates 214.35 KB (🟢 -155 B) 305.68 KB
/blog/2014/11/25/community-roundup-24 217.59 KB (🟢 -162 B) 308.92 KB
/blog/2014/12/18/react-v0.12.2 214.38 KB (🟢 -155 B) 305.71 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 214.78 KB (🟢 -156 B) 306.1 KB
/blog/2015/01/27/react-v0.13.0-beta-1 215.74 KB (🟢 -161 B) 307.07 KB
/blog/2015/02/18/react-conf-roundup-2015 217.73 KB (🟢 -157 B) 309.05 KB
/blog/2015/02/20/introducing-relay-and-graphql 216.88 KB (🟢 -156 B) 308.21 KB
/blog/2015/02/24/react-v0.13-rc1 215.79 KB (🟢 -159 B) 307.11 KB
/blog/2015/02/24/streamlining-react-elements 218.34 KB (🟢 -162 B) 309.66 KB
/blog/2015/03/03/react-v0.13-rc2 215.12 KB (🟢 -158 B) 306.44 KB
/blog/2015/03/04/community-roundup-25 216.08 KB (🟢 -160 B) 307.41 KB
/blog/2015/03/10/react-v0.13 216.4 KB (🟢 -158 B) 307.72 KB
/blog/2015/03/16/react-v0.13.1 214.22 KB (🟢 -155 B) 305.54 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 216.97 KB (🟢 -157 B) 308.3 KB
/blog/2015/03/26/introducing-react-native 214.11 KB (🟢 -157 B) 305.44 KB
/blog/2015/03/30/community-roundup-26 216.04 KB (🟢 -161 B) 307.37 KB
/blog/2015/04/17/react-native-v0.4 214.96 KB (🟢 -156 B) 306.28 KB
/blog/2015/04/18/react-v0.13.2 214.29 KB (🟢 -158 B) 305.62 KB
/blog/2015/05/01/graphql-introduction 218.78 KB (🟢 -158 B) 310.11 KB
/blog/2015/05/08/react-v0.13.3 214.18 KB (🟢 -154 B) 305.51 KB
/blog/2015/05/22/react-native-release-process 214.33 KB (🟢 -156 B) 305.66 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 214.79 KB (🟢 -157 B) 306.11 KB
/blog/2015/07/03/react-v0.14-beta-1 216.3 KB (🟢 -158 B) 307.62 KB
/blog/2015/08/03/new-react-devtools-beta 214.9 KB (🟢 -159 B) 306.22 KB
/blog/2015/08/11/relay-technical-preview 214.96 KB (🟢 -155 B) 306.29 KB
/blog/2015/08/13/reacteurope-roundup 216.55 KB (🟢 -156 B) 307.88 KB
/blog/2015/09/02/new-react-developer-tools 214.32 KB (🟢 -156 B) 305.64 KB
/blog/2015/09/10/react-v0.14-rc1 219.95 KB (🟢 -210 B) 311.28 KB
/blog/2015/09/14/community-roundup-27 216.48 KB (🟢 -158 B) 307.8 KB
/blog/2015/10/01/react-render-and-top-level-api 215.45 KB (🟢 -157 B) 306.77 KB
/blog/2015/10/07/react-v0.14 220.43 KB (🟢 -216 B) 311.76 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 216.2 KB (🟢 -154 B) 307.52 KB
/blog/2015/10/28/react-v0.14.1 214.21 KB (🟢 -156 B) 305.53 KB
/blog/2015/11/02/react-v0.14.2 214.24 KB (🟢 -156 B) 305.56 KB
/blog/2015/11/18/react-v0.14.3 214.36 KB (🟢 -155 B) 305.69 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 215.23 KB (🟢 -154 B) 306.56 KB
/blog/2015/12/16/ismounted-antipattern 214.83 KB (🟢 -155 B) 306.16 KB
/blog/2015/12/18/react-components-elements-and-instances 218.76 KB (🟢 -158 B) 310.08 KB
/blog/2015/12/29/react-v0.14.4 214.03 KB (🟢 -157 B) 305.35 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 215.05 KB (🟢 -157 B) 306.37 KB
/blog/2016/01/12/discontinuing-ie8-support 213.86 KB (🟢 -156 B) 305.18 KB
/blog/2016/02/19/new-versioning-scheme 215.24 KB (🟢 -157 B) 306.56 KB
/blog/2016/03/07/react-v15-rc1 217.93 KB (🟢 -218 B) 309.25 KB
/blog/2016/03/16/react-v15-rc2 214.85 KB (🟢 -157 B) 306.17 KB
/blog/2016/03/29/react-v0.14.8 213.98 KB (🟢 -157 B) 305.31 KB
/blog/2016/04/07/react-v15 222.05 KB (🟢 -297 B) 313.37 KB
/blog/2016/04/08/react-v15.0.1 214.74 KB (🟢 -155 B) 306.06 KB
/blog/2016/07/11/introducing-reacts-error-code-system 214.45 KB (🟢 -156 B) 305.78 KB
/blog/2016/07/13/mixins-considered-harmful 222.61 KB (🟢 -161 B) 313.93 KB
/blog/2016/07/22/create-apps-with-no-configuration 217.94 KB (🟢 -163 B) 309.26 KB
/blog/2016/08/05/relay-state-of-the-state 217.98 KB (🟢 -159 B) 309.3 KB
/blog/2016/09/28/our-first-50000-stars 219.42 KB (🟢 -160 B) 310.75 KB
/blog/2016/11/16/react-v15.4.0 217.37 KB (🟢 -161 B) 308.7 KB
/blog/2017/04/07/react-v15.5.0 217.94 KB (🟢 -161 B) 309.26 KB
/blog/2017/05/18/whats-new-in-create-react-app 217.34 KB (🟢 -169 B) 308.66 KB
/blog/2017/06/13/react-v15.6.0 215.96 KB (🟢 -158 B) 307.28 KB
/blog/2017/07/26/error-handling-in-react-16 216.3 KB (🟢 -158 B) 307.63 KB
/blog/2017/09/08/dom-attributes-in-react-16 216.74 KB (🟢 -161 B) 308.06 KB
/blog/2017/09/25/react-v15.6.2 215.07 KB (🟢 -159 B) 306.4 KB
/blog/2017/09/26/react-v16.0 220.2 KB (🟢 -160 B) 311.53 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 218.11 KB (🟢 -165 B) 309.44 KB
/blog/2017/12/07/introducing-the-react-rfc-process 214.66 KB (🟢 -156 B) 305.98 KB
/blog/2017/12/15/improving-the-repository-infrastructure 230.44 KB (🟢 -167 B) 321.77 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 214.61 KB (🟢 -156 B) 305.93 KB
/blog/2018/03/27/update-on-async-rendering 219.85 KB (🟢 -159 B) 311.18 KB
/blog/2018/03/29/react-v-16-3 216.68 KB (🟢 -153 B) 308 KB
/blog/2018/05/23/react-v-16-4 216.81 KB (🟢 -157 B) 308.14 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 220.47 KB (🟢 -160 B) 311.8 KB
/blog/2018/08/01/react-v-16-4-2 215.46 KB (🟢 -161 B) 306.79 KB
/blog/2018/09/10/introducing-the-react-profiler 217.07 KB (🟢 -166 B) 308.39 KB
/blog/2018/10/01/create-react-app-v2 217.55 KB (🟢 -156 B) 308.87 KB
/blog/2018/10/23/react-v-16-6 216.75 KB (🟢 -157 B) 308.07 KB
/blog/2018/11/13/react-conf-recap 214.46 KB (🟢 -157 B) 305.79 KB
/blog/2018/11/27/react-16-roadmap 220.66 KB (🟢 -162 B) 311.98 KB
/blog/2018/12/19/react-v-16-7 215.59 KB (🟢 -157 B) 306.91 KB
/blog/2019/02/06/react-v16.8.0 217.85 KB (🟢 -158 B) 309.17 KB
/blog/2019/02/23/is-react-translated-yet 217.42 KB (🟢 -159 B) 308.74 KB
/blog/2019/08/08/react-v16.9.0 220.35 KB (🟢 -162 B) 311.67 KB
/blog/2019/08/15/new-react-devtools 214.95 KB (🟢 -159 B) 306.28 KB
/blog/2019/10/22/react-release-channels 216.76 KB (🟢 -157 B) 308.09 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 221.47 KB (🟢 -153 B) 312.79 KB
/blog/2020/02/26/react-v16.13.0 217.69 KB (🟢 -160 B) 309.02 KB
/blog/2020/08/10/react-v17-rc 223.97 KB (🟢 -162 B) 315.3 KB
/blog/all 53.4 KB (🟢 -631 B) 144.72 KB
/community 203.26 KB (🟡 +430 B) 294.59 KB
/community/acknowledgements 204.45 KB (🟡 +430 B) 295.78 KB
/community/meet-the-team 204.98 KB (🟡 +429 B) 296.3 KB
/learn 211.97 KB (🟡 +441 B) 303.3 KB
/learn/add-react-to-a-website 208.09 KB (🟡 +436 B) 299.41 KB
/learn/adding-interactivity 209.89 KB (🟡 +438 B) 301.21 KB
/learn/choosing-the-state-structure 215.63 KB (🟡 +436 B) 306.96 KB
/learn/conditional-rendering 207.87 KB (🟡 +441 B) 299.19 KB
/learn/describing-the-ui 207.07 KB (🟡 +438 B) 298.4 KB
/learn/editor-setup 204.35 KB (🟡 +438 B) 295.68 KB
/learn/escape-hatches 202.59 KB (🟡 +436 B) 293.91 KB
/learn/extracting-state-logic-into-a-reducer 213.23 KB (🟡 +439 B) 304.56 KB
/learn/importing-and-exporting-components 206.26 KB (🟡 +437 B) 297.59 KB
/learn/installation 203.91 KB (🟡 +436 B) 295.23 KB
/learn/javascript-in-jsx-with-curly-braces 206.34 KB (🟡 +438 B) 297.66 KB
/learn/keeping-components-pure 210.47 KB (🟡 +438 B) 301.8 KB
/learn/managing-state 209.19 KB (🟡 +439 B) 300.51 KB
/learn/manipulating-the-dom-with-refs 211.1 KB (🟡 +437 B) 302.43 KB
/learn/passing-data-deeply-with-context 210.62 KB (🟡 +438 B) 301.94 KB
/learn/passing-props-to-a-component 210.04 KB (🟡 +438 B) 301.37 KB
/learn/preserving-and-resetting-state 212.86 KB (🟡 +437 B) 304.18 KB
/learn/queueing-a-series-of-state-updates 207.83 KB (🟡 +437 B) 299.16 KB
/learn/react-developer-tools 203.79 KB (🟡 +436 B) 295.11 KB
/learn/reacting-to-input-with-state 212.31 KB (🟡 +446 B) 303.64 KB
/learn/referencing-values-with-refs 209.35 KB (🟡 +434 B) 300.67 KB
/learn/render-and-commit 206.33 KB (🟡 +438 B) 297.65 KB
/learn/rendering-lists 210.39 KB (🟡 +436 B) 301.71 KB
/learn/responding-to-events 209.39 KB (🟡 +436 B) 300.71 KB
/learn/scaling-up-with-reducer-and-context 207.41 KB (🟡 +438 B) 298.74 KB
/learn/sharing-state-between-components 208.12 KB (🟡 +437 B) 299.44 KB
/learn/start-a-new-react-project 204.76 KB (🟡 +437 B) 296.09 KB
/learn/state-a-components-memory 213.56 KB (🟡 +436 B) 304.88 KB
/learn/state-as-a-snapshot 207.38 KB (🟡 +438 B) 298.71 KB
/learn/thinking-in-react 209.27 KB (🟡 +436 B) 300.59 KB
/learn/updating-arrays-in-state 211.45 KB (🟡 +434 B) 302.78 KB
/learn/updating-objects-in-state 211.17 KB (🟡 +437 B) 302.49 KB
/learn/writing-markup-with-jsx 206.26 KB (🟡 +438 B) 297.59 KB
/learn/your-first-component 207.17 KB (🟡 +440 B) 298.49 KB
/reference 203.22 KB (🟡 +424 B) 294.54 KB
/reference/reactdom 203.37 KB (🟡 +430 B) 294.69 KB
/reference/render 204.71 KB (🟡 +431 B) 296.03 KB
/reference/usestate 211.19 KB (🟡 +431 B) 302.51 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.

@facebook-github-bot
Copy link
Collaborator

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@facebook-github-bot
Copy link
Collaborator

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

Copy link
Collaborator

@harish-sethuraman harish-sethuraman left a comment

Choose a reason for hiding this comment

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

Nice work thanks 😄

Copy link
Member

@gaearon gaearon left a comment

Choose a reason for hiding this comment

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

thanks. can we fix nullability or explain why it's necessary?

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.

4 participants