Files
react-native/Libraries/Utilities/useWindowDimensions.js
T
Dulmandakh 3b3c95b017 Fix useWindowDimensions firing continuously after dims change (#26008)
Summary:
https://github.com/facebook/react-native/pull/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: https://github.com/facebook/react-native/pull/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
2019-08-23 13:50:56 -07:00

34 lines
1023 B
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
'use strict';
import Dimensions from './Dimensions';
import {type DisplayMetrics} from './NativeDeviceInfo';
import {useEffect, useState} from 'react';
export default function useWindowDimensions(): DisplayMetrics {
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', handleChange);
};
}, []);
return dims;
}