Fix useWindowDimensions firing continuously after dims change (#26008)

Summary:
#25990 fixed the `forceUpdate` method to actually update the component, but caused the useEffect to fire on every render, causing continuous updates after dimensions changed (e.g. from rotation).

This reworks things a bit to be a bit simpler and more idiomatic so it's not quite as confusing, and fixes the bugs.

## Changelog

[General] [Fixed] - Fix useWindowDimensions hook firing continuously after dimensions change

Pull Request resolved: #26008

Test Plan:
Aparently the Mobile Home app supports rotation on iOS now, so replaced it's content with the first `DimensionsExample` and confirmed with logging that `useEffect` fires exactly once, on initial mount, but the view still updates as expected when rotated:

https://pxl.cl/Hfds

Reviewed By: yungsters

Differential Revision: D16765269

Pulled By: sahrens

fbshipit-source-id: ef55d8a470dcfe87aa125d4c426bf01cfe0091a7

Author: dulmandakh

Libraries/Utilities/useWindowDimensions.js

@@ -12,24 +12,22 @@
 
 import Dimensions from './Dimensions';
 import {type DisplayMetrics} from './NativeDeviceInfo';
-import * as React from 'react';
+import {useEffect, useState} from 'react';
 
 export default function useWindowDimensions(): DisplayMetrics {
-  const dims = Dimensions.get('window'); // always read the latest value
-  const forceUpdate = React.useState(false)[1].bind(null, v => !v);
-  const initialDims = React.useState(dims)[0];
-  React.useEffect(() => {
-    Dimensions.addEventListener('change', forceUpdate);
-
-    const latestDims = Dimensions.get('window');
-    if (latestDims !== initialDims) {
-      // We missed an update between calling `get` in render and
-      // `addEventListener` in this handler...
-      forceUpdate();
+  const [dims, setDims] = useState(() => Dimensions.get('window'));
+  useEffect(() => {
+    function handleChange({window}) {
+      setDims(window);
     }
+    Dimensions.addEventListener('change', handleChange);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setDims(Dimensions.get('window'));
     return () => {
-      Dimensions.removeEventListener('change', forceUpdate);
+      Dimensions.removeEventListener('change', handleChange);
     };
-  }, [forceUpdate, initialDims]);
+  }, []);
   return dims;
 }