useWindowDimensions causes infinite re-rendering
See original GitHub issueUsing 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
- import
useWindowDimensions
- 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:
- Created 4 years ago
- Reactions:1
- Comments:12 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
yeah. They forgot to update
@types/react-native