From 3284457fb1ddf0bd3549e87fb862b5f9cfd3b1e9 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 21 Sep 2023 18:05:25 +0600
Subject: [PATCH] wip: investigating slow react app

---
 .../react/content/investigate-slow-app.md     | 33 +++++++++++++++++++
 src/data/question-groups/react/react.md       |  5 +++
 2 files changed, 38 insertions(+)
 create mode 100644 src/data/question-groups/react/content/investigate-slow-app.md

diff --git a/src/data/question-groups/react/content/investigate-slow-app.md b/src/data/question-groups/react/content/investigate-slow-app.md
new file mode 100644
index 000000000..6493a2c2e
--- /dev/null
+++ b/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.
diff --git a/src/data/question-groups/react/react.md b/src/data/question-groups/react/react.md
index 602832a36..2cc1812bc 100644
--- a/src/data/question-groups/react/react.md
+++ b/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'
 ---