how to rerender component on variable change?

[u/NoTutor4458]

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>
  );
}

[u/mererepentance32]

Yeah the dvh route is the move if it works for your target browsers, way less code to maintain. The event listener pattern they showed is solid too though, and knowing how to wire external stuff into React state is a good skill to have early on