wip: investigating slow react app

src/data/question-groups/react/content/investigate-slow-app.md

@@ -0,0 +1,33 @@
+There are many reasons why an app might be slow. It could be due to a slow network, a slow backend, or a slow client. It could also be due to a memory leak, unnecessary re-renders, or large bundle sizes.
+
+Here are some tips to help you investigate and fix performance issues:
+
+## Use the React DevTools Profiler
+
+The React DevTools Profiler helps you visualize how components render and identify costly renderings. It can also help you identify unnecessary re-renders.
+
+## Check for Unnecessary Renders
+
+Ensure that components don't render more often than needed. Be clear about the `useEffect` dependencies and avoid creating new objects or arrays every render, as these can trigger unnecessary child component renders. Tools like [why-did-you-render](https://npm.im/@welldone-software/why-did-you-render) can help spot unnecessary re-renders.
+
+## Analyze Bundle Size
+
+Use your production build to analyze your bundle size. Tools like [webpack-bundle-analyzer](https://npm.im/webpack-bundle-analyzer) or [source-map-explorer](https://npm.im/source-map-explorer) can help you see if large libraries or unused code is slowing down the initial load.
+
+## Optimize Images & Assets
+
+Ensure images are appropriately sized and use modern formats. Also, consider using CDNs for assets that don't change often.
+
+## Lazy Load Components
+
+Use `lazy()` and dynamic imports to split your bundle and load components only when they're needed. This can help reduce the initial load time.
+
+## Check Network Requests
+
+Slow API calls or fetching large amounts of data can affect performance. Optimize your backend, paginate data, or cache results. You can also use tools like [@tanstack/react-query](https://npm.im/@tanstack/react-query) or [swr](https://npm.im/swr) to help manage data fetching and caching.
+
+## Use Production Build for Testing
+
+Ensure you're testing the performance on a production build, as development builds are often slower due to extra checks and logs.
+
+Regularly profiling and monitoring your app can help you spot and fix performance issues before they become significant problems. You can use tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse) or [Calibre](https://calibreapp.com) to monitor your app's performance over time.

src/data/question-groups/react/react.md

@@ -300,4 +300,9 @@ questions:
     topics:
       - 'Debugging'
       - 'Intermediate'
+  - question: How do you investigate a slow React app and identify performance bottlenecks?
+    answer: investigate-slow-app.md
+    topics:
+      - 'Performance'
+      - 'Intermediate'
 ---