"I set the window width and height to 100%, but when I resize the window, the message box shakes."

[2531800823]

https://stackblitz.com/edit/stackblitz-starters-hkd9ur?description=React%20%20%20TypeScript%20starter%20project&file=src%2FApp.tsx,src%2Fstyle.css,src%2Findex.tsx&title=React%20Starter

[2531800823]

need Open is New Tab ![Uploading image.png…]()

[2531800823]

![Uploading 20231225225209rec.gif…]()

[OvidijusParsiunas]

Hi @2531800823.

Thankyou for creating a Stackblitz example. I have tried to resize the view using the split line and the component seems to resize correctly without shaking:

\ Unfortunately for some strange reason I am unable to view your images :(

This is the markdown syntax for an image if it helps: <img width="400" alt="image" src="https://github.com/OvidijusParsiunas/deep-chat/assets/18709577/a34ae741-95be-4dfb-a8e1-212abbdb456a">

\ I am unfortunately unable to reproduce your problem. Could you maybe elaborate on what actions I would need to take and what I should be observing. Thanks!

[2531800823]

at the upper right corner Open in New Tab , Then open devTools.

[2531800823]

@OvidijusParsiunas

[2531800823]

[OvidijusParsiunas]

Thanks. I have tested it in Chrome developer tools and everything appear to work ok. Is this what you see on your computer?

https://github.com/OvidijusParsiunas/deep-chat/assets/18709577/7f211cd1-0bbf-4980-93df-91bc8a2ab369

[OvidijusParsiunas]

Ok, I just saw your gif, that is interesting. Let me investigate.

[2531800823]

Thank you for your help

[OvidijusParsiunas]

Ok, I see why this is happening.

When the screen size is changed - useResizeDetector causes the App component and along with it the Deep Chat component to re-render. So when you change the window size - the Deep Chat component is re-rendered many times, which is very computationally intensive and hence why you get the shaking/stuttering effect.

I would advise you not use it as it also leads to bad user experience e.g. if the user has a conversation in the chat and then resizes the window which will re-fresh the entire chat (unless you track state outside of the component, but this is for a bigger application).

To fix this I would instead recommend using the following line which will automatically fill the screen dimensions without causing the component to re-render on dimension changes: style={{ width: '100vw', height: '100vh' }}

Here is a link to the live example.

Let me know if you need any assistance! Thanks!

[2531800823]

style={{ width: '100vw', height: '100vh' }} I want him to be responsive，What if the width is not fixed？

[OvidijusParsiunas]

You can change the screen size as necessary and these properties will automatically fill the screen's dimensions no matter what size they are, as they are inherently responsive.

If you need the dimensions to be more specific - you can change them to width: '90vw' or width: 'calc(100vw - 20px)'.

If you are experiencing any specific issues with this let me know.

[2531800823]

thanks a lot!

[OvidijusParsiunas]

No problem!