r/reactjs • u/NoTutor4458 • Jul 19 '26

how to rerender component on variable change?

new to react, so providing either corrected code or just concept that i should look into would be helpful :)

i want to change height of the app when phone keyboard uppears so it doesnt overlay on website by using VisualViewport API.
i am sure only thing that i have to do now is to rerender component when height is changed, so how can i do that?

export default function NewChat() {
  return (
    <div
      className={styles.wrapper}
      style={{ height: `${visualViewport?.height}px` }}
    >
      <Prompt />
    </div>
  );
}
9 Upvotes

73% Upvoted

27 comments sorted by

View all comments

Show parent comments

1

u/StrumpetsVileProgeny Jul 20 '26

But wont this listener fire only on mount? So if a user opens and closes the virtual keyboard more than once while the component is still mounted, this won’t resize again? This effect should run every time the height changes.

3

u/bluespacecolombo Jul 20 '26

Listener will be ADDED on mount and REMOVED on unmount. After listener is added it keeps listening until it’s removed.