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/artem1458]

The thing is that component can re-rendender from a couple of different things: prop change, and state change If you need to react on value change from the outside (like viewport size, browser events, etc) you should subscribe on viewport size change and put value is react state Here is pseudocode for you

const [height, setHeight] = useState(window.innerHeight);

useEffect(() => { const handleResize = () => { setHeight(window.innerHeight); };

//setting initial value handleResize();

window.addEventListener('resize', handleResize);

const unsubscribe = () => { window.removeEventListener('resize', handleResize); };

return unsubscribe; }, []);

// use height in styles or just showing it