Use MDXContext directly

[gaearon]

We need mdx-js/mdx#1924 for #4256. That only lands in MDX 2.0, and our attempt to migrate has stalled. For now, we can work around it by using the context provider directly.

[github-actions]

Size Changes

📦 Next.js Bundle Analysis

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

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
/	217.56 KB (-20 B)	310.77 KB
/404	216.68 KB (-14 B)	309.88 KB
/blog/2013/06/02/jsfiddle-integration	227.93 KB (-20 B)	321.14 KB
/blog/2013/06/05/why-react	229.66 KB (-20 B)	322.86 KB
/blog/2013/06/12/community-roundup	229.36 KB (-20 B)	322.57 KB
/blog/2013/06/19/community-roundup-2	230.03 KB (-20 B)	323.24 KB
/blog/2013/06/21/react-v0-3-3	228.08 KB (-20 B)	321.29 KB
/blog/2013/06/27/community-roundup-3	230.39 KB (-20 B)	323.6 KB
/blog/2013/07/02/react-v0-4-autobind-by-default	228.7 KB (-20 B)	321.91 KB
/blog/2013/07/03/community-roundup-4	229.77 KB (-20 B)	322.97 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values	228.57 KB (-20 B)	321.78 KB
/blog/2013/07/17/react-v0-4-0	229.28 KB (-20 B)	322.49 KB
/blog/2013/07/23/community-roundup-5	230.16 KB (-20 B)	323.37 KB
/blog/2013/07/26/react-v0-4-1	228.04 KB (-20 B)	321.25 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails	228.65 KB (-20 B)	321.85 KB
/blog/2013/08/05/community-roundup-6	229.45 KB (-20 B)	322.66 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications	228.66 KB (-20 B)	321.87 KB
/blog/2013/08/26/community-roundup-7	229.62 KB (-20 B)	322.83 KB
/blog/2013/09/24/community-roundup-8	231.05 KB (-20 B)	324.26 KB
/blog/2013/10/03/community-roundup-9	229.99 KB (-20 B)	323.2 KB
/blog/2013/10/16/react-v0.5.0	229.67 KB (-20 B)	322.88 KB
/blog/2013/10/29/react-v0-5-1	228.03 KB (-20 B)	321.24 KB
/blog/2013/11/06/community-roundup-10	231.65 KB (-20 B)	324.86 KB
/blog/2013/11/18/community-roundup-11	230.73 KB (-20 B)	323.94 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2	228.5 KB (-20 B)	321.71 KB
/blog/2013/12/19/react-v0.8.0	228.92 KB (-20 B)	322.13 KB
/blog/2013/12/23/community-roundup-12	230.38 KB (-20 B)	323.59 KB
/blog/2013/12/30/community-roundup-13	230.17 KB (-20 B)	323.37 KB
/blog/2014/01/02/react-chrome-developer-tools	228.42 KB (-20 B)	321.63 KB
/blog/2014/01/06/community-roundup-14	229.76 KB (-20 B)	322.97 KB
/blog/2014/02/05/community-roundup-15	230.98 KB (-20 B)	324.19 KB
/blog/2014/02/15/community-roundup-16	230.69 KB (-20 B)	323.9 KB
/blog/2014/02/16/react-v0.9-rc1	231.09 KB (-20 B)	324.3 KB
/blog/2014/02/20/react-v0.9	231.54 KB (-20 B)	324.75 KB
/blog/2014/02/24/community-roundup-17	230.4 KB (-20 B)	323.61 KB
/blog/2014/03/14/community-roundup-18	231.37 KB (-20 B)	324.58 KB
/blog/2014/03/19/react-v0.10-rc1	229.68 KB (-20 B)	322.88 KB
/blog/2014/03/21/react-v0.10	229.7 KB (-20 B)	322.91 KB
/blog/2014/03/28/the-road-to-1.0	229.81 KB (-20 B)	323.02 KB
/blog/2014/04/04/reactnet	228.46 KB (-20 B)	321.66 KB
/blog/2014/05/06/flux	228.58 KB (-20 B)	321.79 KB
/blog/2014/05/29/one-year-of-open-source-react	228.81 KB (-20 B)	322.01 KB
/blog/2014/06/27/community-roundup-19	230.35 KB (-20 B)	323.55 KB
/blog/2014/07/13/react-v0.11-rc1	230.73 KB (-20 B)	323.94 KB
/blog/2014/07/17/react-v0.11	231.99 KB (-20 B)	325.2 KB
/blog/2014/07/25/react-v0.11.1	228.94 KB (-20 B)	322.15 KB
/blog/2014/07/28/community-roundup-20	230.49 KB (-20 B)	323.7 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher	230.13 KB (-20 B)	323.33 KB
/blog/2014/08/03/community-roundup-21	230.16 KB (-20 B)	323.37 KB
/blog/2014/09/03/introducing-the-jsx-specification	228.17 KB (-20 B)	321.37 KB
/blog/2014/09/12/community-round-up-22	230.64 KB (-20 B)	323.85 KB
/blog/2014/09/16/react-v0.11.2	228.94 KB (-20 B)	322.14 KB
/blog/2014/09/24/testing-flux-applications	232.12 KB (-20 B)	325.32 KB
/blog/2014/10/14/introducing-react-elements	231.07 KB (-20 B)	324.28 KB
/blog/2014/10/16/react-v0.12-rc1	231.03 KB (-20 B)	324.24 KB
/blog/2014/10/17/community-roundup-23	231.61 KB (-20 B)	324.82 KB
/blog/2014/10/27/react-js-conf	228.21 KB (-20 B)	321.42 KB
/blog/2014/10/28/react-v0.12	230.98 KB (-20 B)	324.18 KB
/blog/2014/11/24/react-js-conf-updates	228.6 KB (-20 B)	321.8 KB
/blog/2014/11/25/community-roundup-24	231.84 KB (-20 B)	325.04 KB
/blog/2014/12/18/react-v0.12.2	228.62 KB (-20 B)	321.83 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship	229.02 KB (-20 B)	322.23 KB
/blog/2015/01/27/react-v0.13.0-beta-1	229.99 KB (-20 B)	323.19 KB
/blog/2015/02/18/react-conf-roundup-2015	231.97 KB (-20 B)	325.18 KB
/blog/2015/02/20/introducing-relay-and-graphql	231.12 KB (-20 B)	324.33 KB
/blog/2015/02/24/react-v0.13-rc1	230.03 KB (-20 B)	323.23 KB
/blog/2015/02/24/streamlining-react-elements	232.58 KB (-20 B)	325.78 KB
/blog/2015/03/03/react-v0.13-rc2	229.36 KB (-20 B)	322.57 KB
/blog/2015/03/04/community-roundup-25	230.32 KB (-20 B)	323.53 KB
/blog/2015/03/10/react-v0.13	230.64 KB (-20 B)	323.85 KB
/blog/2015/03/16/react-v0.13.1	228.46 KB (-20 B)	321.67 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay	231.22 KB (-20 B)	324.42 KB
/blog/2015/03/26/introducing-react-native	228.35 KB (-20 B)	321.56 KB
/blog/2015/03/30/community-roundup-26	230.29 KB (-20 B)	323.49 KB
/blog/2015/04/17/react-native-v0.4	229.2 KB (-20 B)	322.41 KB
/blog/2015/04/18/react-v0.13.2	228.54 KB (-20 B)	321.74 KB
/blog/2015/05/01/graphql-introduction	233.03 KB (-20 B)	326.23 KB
/blog/2015/05/08/react-v0.13.3	228.43 KB (-20 B)	321.63 KB
/blog/2015/05/22/react-native-release-process	228.58 KB (-20 B)	321.78 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools	229.03 KB (-20 B)	322.24 KB
/blog/2015/07/03/react-v0.14-beta-1	230.54 KB (-20 B)	323.75 KB
/blog/2015/08/03/new-react-devtools-beta	229.14 KB (-20 B)	322.35 KB
/blog/2015/08/11/relay-technical-preview	229.2 KB (-20 B)	322.41 KB
/blog/2015/08/13/reacteurope-roundup	230.79 KB (-20 B)	324 KB
/blog/2015/09/02/new-react-developer-tools	228.56 KB (-20 B)	321.77 KB
/blog/2015/09/10/react-v0.14-rc1	234.19 KB (-20 B)	327.4 KB
/blog/2015/09/14/community-roundup-27	230.72 KB (-20 B)	323.92 KB
/blog/2015/10/01/react-render-and-top-level-api	229.69 KB (-20 B)	322.9 KB
/blog/2015/10/07/react-v0.14	234.67 KB (-20 B)	327.88 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord	230.44 KB (-20 B)	323.65 KB
/blog/2015/10/28/react-v0.14.1	228.45 KB (-20 B)	321.66 KB
/blog/2015/11/02/react-v0.14.2	228.48 KB (-20 B)	321.69 KB
/blog/2015/11/18/react-v0.14.3	228.6 KB (-20 B)	321.81 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship	229.48 KB (-20 B)	322.68 KB
/blog/2015/12/16/ismounted-antipattern	229.08 KB (-20 B)	322.28 KB
/blog/2015/12/18/react-components-elements-and-instances	233 KB (-20 B)	326.21 KB
/blog/2015/12/29/react-v0.14.4	228.27 KB (-20 B)	321.48 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A	229.29 KB (-20 B)	322.5 KB
/blog/2016/01/12/discontinuing-ie8-support	228.1 KB (-20 B)	321.3 KB
/blog/2016/02/19/new-versioning-scheme	229.48 KB (-20 B)	322.68 KB
/blog/2016/03/07/react-v15-rc1	232.17 KB (-20 B)	325.38 KB
/blog/2016/03/16/react-v15-rc2	229.09 KB (-20 B)	322.3 KB
/blog/2016/03/29/react-v0.14.8	228.23 KB (-20 B)	321.43 KB
/blog/2016/04/07/react-v15	236.29 KB (-20 B)	329.5 KB
/blog/2016/04/08/react-v15.0.1	228.98 KB (-20 B)	322.19 KB
/blog/2016/07/11/introducing-reacts-error-code-system	228.7 KB (-20 B)	321.9 KB
/blog/2016/07/13/mixins-considered-harmful	236.85 KB (-20 B)	330.06 KB
/blog/2016/07/22/create-apps-with-no-configuration	232.18 KB (-20 B)	325.38 KB
/blog/2016/08/05/relay-state-of-the-state	232.22 KB (-20 B)	325.42 KB
/blog/2016/09/28/our-first-50000-stars	233.66 KB (-20 B)	326.87 KB
/blog/2016/11/16/react-v15.4.0	231.62 KB (-20 B)	324.83 KB
/blog/2017/04/07/react-v15.5.0	232.18 KB (-20 B)	325.39 KB
/blog/2017/05/18/whats-new-in-create-react-app	231.58 KB (-20 B)	324.78 KB
/blog/2017/06/13/react-v15.6.0	230.2 KB (-20 B)	323.41 KB
/blog/2017/07/26/error-handling-in-react-16	230.55 KB (-20 B)	323.76 KB
/blog/2017/09/08/dom-attributes-in-react-16	230.98 KB (-20 B)	324.19 KB
/blog/2017/09/25/react-v15.6.2	229.32 KB (-20 B)	322.52 KB
/blog/2017/09/26/react-v16.0	234.44 KB (-20 B)	327.65 KB
/blog/2017/11/28/react-v16.2.0-fragment-support	232.36 KB (-20 B)	325.56 KB
/blog/2017/12/07/introducing-the-react-rfc-process	228.9 KB (-20 B)	322.1 KB
/blog/2017/12/15/improving-the-repository-infrastructure	244.69 KB (-20 B)	337.89 KB
/blog/2018/03/01/sneak-peek-beyond-react-16	228.85 KB (-20 B)	322.06 KB
/blog/2018/03/27/update-on-async-rendering	234.09 KB (-20 B)	327.3 KB
/blog/2018/03/29/react-v-16-3	230.91 KB (-20 B)	324.12 KB
/blog/2018/05/23/react-v-16-4	231.05 KB (-20 B)	324.26 KB
/blog/2018/06/07/you-probably-dont-need-derived-state	234.71 KB (-20 B)	327.92 KB
/blog/2018/08/01/react-v-16-4-2	229.71 KB (-20 B)	322.91 KB
/blog/2018/09/10/introducing-the-react-profiler	231.31 KB (-20 B)	324.52 KB
/blog/2018/10/01/create-react-app-v2	231.79 KB (-20 B)	325 KB
/blog/2018/10/23/react-v-16-6	230.99 KB (-20 B)	324.2 KB
/blog/2018/11/13/react-conf-recap	228.71 KB (-20 B)	321.91 KB
/blog/2018/11/27/react-16-roadmap	234.9 KB (-20 B)	328.1 KB
/blog/2018/12/19/react-v-16-7	229.83 KB (-20 B)	323.04 KB
/blog/2019/02/06/react-v16.8.0	232.09 KB (-20 B)	325.3 KB
/blog/2019/02/23/is-react-translated-yet	231.66 KB (-20 B)	324.86 KB
/blog/2019/08/08/react-v16.9.0	234.59 KB (-20 B)	327.8 KB
/blog/2019/08/15/new-react-devtools	229.2 KB (-20 B)	322.4 KB
/blog/2019/10/22/react-release-channels	231 KB (-20 B)	324.21 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense	235.71 KB (-20 B)	328.92 KB
/blog/2020/02/26/react-v16.13.0	231.94 KB (-20 B)	325.14 KB
/blog/2020/08/10/react-v17-rc	238.21 KB (-20 B)	331.42 KB
/community	217.26 KB (-18 B)	310.47 KB
/community/acknowledgements	218.45 KB (-16 B)	311.66 KB
/community/meet-the-team	218.97 KB (-18 B)	312.18 KB
/learn	221.76 KB (-18 B)	314.96 KB
/learn/add-react-to-a-website	222.09 KB (-18 B)	315.29 KB
/learn/adding-interactivity	223.89 KB (-18 B)	317.1 KB
/learn/choosing-the-state-structure	229.63 KB (-18 B)	322.83 KB
/learn/conditional-rendering	221.86 KB (-18 B)	315.07 KB
/learn/describing-the-ui	221.08 KB (-17 B)	314.29 KB
/learn/editor-setup	218.35 KB (-17 B)	311.56 KB
/learn/escape-hatches	216.59 KB (-14 B)	309.8 KB
/learn/extracting-state-logic-into-a-reducer	227.23 KB (-18 B)	320.44 KB
/learn/importing-and-exporting-components	220.26 KB (-17 B)	313.47 KB
/learn/installation	217.92 KB (-16 B)	311.13 KB
/learn/javascript-in-jsx-with-curly-braces	220.33 KB (-17 B)	313.54 KB
/learn/keeping-components-pure	224.47 KB (-19 B)	317.68 KB
/learn/managing-state	223.2 KB (-18 B)	316.4 KB
/learn/manipulating-the-dom-with-refs	225.1 KB (-19 B)	318.31 KB
/learn/passing-data-deeply-with-context	224.61 KB (-20 B)	317.82 KB
/learn/passing-props-to-a-component	224.04 KB (-19 B)	317.25 KB
/learn/preserving-and-resetting-state	226.85 KB (-19 B)	320.06 KB
/learn/queueing-a-series-of-state-updates	221.83 KB (-18 B)	315.04 KB
/learn/react-developer-tools	217.79 KB (-19 B)	310.99 KB
/learn/reacting-to-input-with-state	226.31 KB (-18 B)	319.51 KB
/learn/referencing-values-with-refs	223.35 KB (-17 B)	316.56 KB
/learn/render-and-commit	220.32 KB (-18 B)	313.53 KB
/learn/rendering-lists	224.39 KB (-18 B)	317.59 KB
/learn/responding-to-events	223.38 KB (-20 B)	316.59 KB
/learn/scaling-up-with-reducer-and-context	221.41 KB (-18 B)	314.62 KB
/learn/sharing-state-between-components	222.11 KB (-18 B)	315.32 KB
/learn/start-a-new-react-project	218.76 KB (-19 B)	311.96 KB
/learn/state-a-components-memory	227.56 KB (-17 B)	320.76 KB
/learn/state-as-a-snapshot	221.38 KB (-18 B)	314.58 KB
/learn/thinking-in-react	223.2 KB (-17 B)	316.4 KB
/learn/updating-arrays-in-state	225.44 KB (-19 B)	318.64 KB
/learn/updating-objects-in-state	225.16 KB (-18 B)	318.37 KB
/learn/writing-markup-with-jsx	220.26 KB (-17 B)	313.47 KB
/learn/your-first-component	221.16 KB (-18 B)	314.37 KB
/reference	217.21 KB (-17 B)	310.42 KB
/reference/reactdom	217.36 KB (-18 B)	310.57 KB
/reference/render	218.71 KB (-18 B)	311.91 KB
/reference/usestate	221.75 KB (-19 B)	314.96 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.