{"version":1,"pages":[{"id":"-MMUjIXz4BZq5mPtBR67","title":"Welcome!","pathname":"/react","siteSpaceId":"sitesp_Jj8oh","description":""},{"id":"-MMqknqvcjg8jLNo2Fhm","title":"Performance Monitoring","pathname":"/react/performance/performance-monitoring","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Performance"}]},{"id":"-MMt_xNx3V5vUszHZNtp","title":"Analyzing Bundle Sizes","pathname":"/react/performance/analyzing-bundle-sizes","siteSpaceId":"sitesp_Jj8oh","description":"Webpack Bundle Analyzer is a webpack plugin which helps you visualize the size of your bundles with an interactive zoom-able tree-map.","breadcrumbs":[{"label":"Performance"}]},{"id":"-MP3mUwYhev_E5NQbu_r","title":"How to speed up your app","pathname":"/react/performance/how-to-speed-up-your-app","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Performance"}]},{"id":"-MMjrE3cE2AT0osz0awf","title":"How to avoid expensive re-calculations","pathname":"/react/how-to-avoid-expensive-re-calculating","siteSpaceId":"sitesp_Jj8oh","description":"React has a built-in hook called  useMemo that allows you to memoize expensive functions so that you can avoid calling them on every render."},{"id":"-MMoc_a74v5ji-HKVpr5","title":"How to decrease unnecessary re-renders","pathname":"/react/how-to-decrease-unnecessary-re-renders","siteSpaceId":"sitesp_Jj8oh","description":""},{"id":"-MMoqBwCHHyzRhRUfijh","title":"How to handle CPU-intensive tasks","pathname":"/react/expensive-calculations-using-web-worker","siteSpaceId":"sitesp_Jj8oh","description":"Web workers make the application fast by running CPU-intensive tasks on a different thread other than the main thread."},{"id":"-MP3lrsUdPacekvXE-Nb","title":"Styled Components","pathname":"/react/design-systems/styled-components","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Design System"}]},{"id":"-MNXl9BHKcAg3zTCruTx","title":"Theme UI","pathname":"/react/design-systems/theme-ui","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Design System"}]},{"id":"-MNYw_K_U2QECLepXE9v","title":"Base Web","pathname":"/react/design-systems/base-web","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Design System"}]},{"id":"-MOu4zFESMbvUWdPXqVN","title":"Styled JSX","pathname":"/react/design-systems/styled-jsx","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Design System"}]},{"id":"-Me1pThKGdmUfI_rN78p","title":"Reach UI","pathname":"/react/design-systems/reach-ui","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Design System"}]},{"id":"-MgydCXbO7qLauiU7owe","title":"Evergreen","pathname":"/react/design-systems/evergreen","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Design System"}]},{"id":"-MPW8Gc5JqyJm6QOe_NQ","title":"Third-Party Assets","pathname":"/react/third-party-assets","siteSpaceId":"sitesp_Jj8oh","description":""},{"id":"-MPYRXD3WRd0CLVJEnYV","title":"Clickjacking","pathname":"/react/untitled","siteSpaceId":"sitesp_Jj8oh","description":""},{"id":"-MPWJ2i8KdHIXYp1QpQx","title":"Cross-Site Request Forgery","pathname":"/react/react-csrf","siteSpaceId":"sitesp_Jj8oh","description":""},{"id":"-MP3kH8i4cUOGCVnJIfM","title":"Why Next.js","pathname":"/react/next-js/why-next.js","siteSpaceId":"sitesp_Jj8oh","description":"Next.js is JavaScript framework that helps you build web applications using React.js.","breadcrumbs":[{"label":"Next JS"}]},{"id":"-MNXiXAd_lFZYp7mDM6k","title":"How to style Next JS","pathname":"/react/next-js/styling-in-next.js","siteSpaceId":"sitesp_Jj8oh","description":"Next.js uses React, you can use any other mechanism that works with React to style your apps.","breadcrumbs":[{"label":"Next JS"}]},{"id":"-MNh37wX7w6HppyYGUFT","title":"How to configure Next.js","pathname":"/react/next-js/configuration-plugins","siteSpaceId":"sitesp_Jj8oh","description":"Next.js is production-ready and handles almost everything, but don't be scared to reach to that config and extend what you need.","breadcrumbs":[{"label":"Next JS"}]},{"id":"-MNdBhD3NqFNglXSAYYE","title":"API in Next JS","pathname":"/react/next-js/next.js-api-routes","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Next JS"}]},{"id":"-MP3kf-oLS8FH2jOqKSi","title":"How to fetch data in Next.js","pathname":"/react/next-js/how-to-fetch-data-in-next.js","siteSpaceId":"sitesp_Jj8oh","description":"There are many ways to fetch data with Next.js. Depending on when you need the data and what you're doing with it, you have options.","breadcrumbs":[{"label":"Next JS"}]},{"id":"-MP3kzCB6b77AtUTRO2D","title":"Dynamic imports","pathname":"/react/next-js/working-with-server-side-rendering","siteSpaceId":"sitesp_Jj8oh","description":"","breadcrumbs":[{"label":"Next JS"}]}]}