Skip to content
Browse files
Fix useWindowDimensions firing continuously after dims change (#26008)
#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:

Reviewed By: yungsters

Differential Revision: D16765269

Pulled By: sahrens

fbshipit-source-id: ef55d8a470dcfe87aa125d4c426bf01cfe0091a7
  • Loading branch information
dulmandakh authored and facebook-github-bot committed Aug 23, 2019
1 parent f8a64f9 commit 3b3c95b0170e60983eb6e89b910d100d08eee141
Showing 1 changed file with 12 additions and 14 deletions.
@@ -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...
const [dims, setDims] = useState(() => Dimensions.get('window'));
useEffect(() => {
function handleChange({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.
return () => {
Dimensions.removeEventListener('change', forceUpdate);
Dimensions.removeEventListener('change', handleChange);
}, [forceUpdate, initialDims]);
}, []);
return dims;

0 comments on commit 3b3c95b

Please sign in to comment.