Issue 5: Reduce re-rendering of useThreadIndent / Reduce duplicated code

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
thread-gpt	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 12, 2023 at 6:32PM (UTC)

[dtinth]

When resizing this caused all the component to render on every resize. I’ll add another commit to make this more optimal krub.

https://user-images.githubusercontent.com/193136/224563932-074860af-f5e3-4a6a-87e4-76d6660b8050.mov

[dtinth]

Fixed in commit 91ad55a.

• Used a React Context instead of prop drilling.
• Extract responsive code to ResponsiveWrapper, so that the whole App doesn’t re-render when resizing.
  • In previous version, App calls useScreenSize and useThreadIndent which results in a re-render on every resize. Because of that App re-renders on every resize which is inefficient.
  • Now App does not call these hooks. It delegates to ResponsiveWrapper to re-render just the parts that needed to re-render.

After the fix:

https://user-images.githubusercontent.com/193136/224564636-4890537c-31b6-46d3-9c68-c8ad2b8ff87b.mov

When optimizing React, I recommend turning on React Devtools and enable "Highlight updates when components render." It can help uncover inefficiencies.