question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useWindowDimensions causes infinite re-rendering

See original GitHub issue

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', 

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
IjzerenHeincommented, Nov 15, 2019

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;
}
1reaction
ShaMan123commented, Oct 23, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preventing infinite re-renders when using useEffect and ...
React's useEffect hook is an incredibly useful tool for fetching data, but if you're not careful, can cause infinite re-renders.
Read more >
"Error: Too many re-renders. React limits the number of ...
The reason for the infinite loop is because something (most likely setState ) in the event callback is triggering a re-render.
Read more >
The error "Too many re-renders. React limits the number of ...
The issue is that the setCounter function gets invoked when the component renders, updates the state, which causes a re-render and does that...
Read more >
Error Too many re-renders infinite loop in React Js
The most common cause of the Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop is ......
Read more >
How to Solve the Infinite Loop of React.useEffect()
useEffect() hook because it can generate infinite loops. ... After re-rendering useEffect() executes the side-effect callback and again ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found