useWindowDimensions causes infinite re-rendering

[ShaMan123]

Using useWindowDimensions causes the app to re-render infinitly.
I have no idea why.
I copied the source code to my app and used it without any issues.
Once I use the exported hook this issue resumes.
Running on android.

React Native version: 0.61.2

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 665.92 MB / 7.87 GB
  Binaries:
    Node: 8.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.10.1 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312

Steps To Reproduce

1. import useWindowDimensions
2. use it inside a function component or custom hook

Describe what you expected to happen:
use the hook without any issues.

Snack, code example, screenshot, or link to a repository:

 ▶︎ 'Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn\'t have a dependency array, or one of the dependencies changes on every render.%s', 

[radko93]

But are you trying to setState on useEffect?

[ShaMan123]

Not that I know of. I'm isolating pieces of code, trying to triage the issue.
Once I use the exported useWindowDimensions the problem occurs.
I suspect this issue is related somehow to react-native-reanimated's Animated.Node registration. But is a standalone bug none the less.

[ShaMan123]

You can see in the source code that there is a setState on useEffect.
AFAIK there shouldn't be a problem doing this as long as it doesn't create a loop

[betoharres]

Can confirm, I came here because of this problem. I thought it could be storybook configuration blasting my CPU to 100%, but after changing useWindowDimension() back to Dimension.get('window) everything calmed down and the warnings went away.

System:
    OS: Linux 5.1 Arch Linux undefined
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 3.04 GB / 15.59 GB
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 11.15.0 - /usr/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.10.0 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 26.0.3, 28.0.3, 29.0.0
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.1 => 0.61.1
  npmGlobalPackages:
    react-native-cli: 2.0.1

[Aleksefo]

How can one even use the hook?
Neither seem to work:
import React, { useState, useWindowDimensions } from 'react'
import { View, useWindowDimensions } from 'react-native'
import { useWindowDimensions } from 'useWindowDimensions'

[ShaMan123]

@Aleksefo it's imported from react-native, and only from RN0.61+

[Aleksefo]

@ShaMan123 turns out it works, just TypeScript is complaining that
TS2305: Module '"react-native"' has no exported member 'useWindowDimensions'.

[ShaMan123]

yeah. They forgot to update @types/react-native

[ScreamZ]

+1

Had to replace by:

        itemWidth={Dimensions.get("window").width}
        sliderWidth={Dimensions.get("window").width}

Happened after leaving the app and coming back

[IjzerenHein]

Interestingly, this is the code actually shipped with react-native (0.61.4), and it causes the infinite loop.
It was fixed by PR #26008 but hasn't been shipped yet.

/**
 * 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 * as React 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();
    }
    return () => {
      Dimensions.removeEventListener('change', forceUpdate);
    };
  }, [forceUpdate, initialDims]);
  return dims;
}

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.