Maximum update depth exceeded
The screen freezes, then React stops with one of these:
Too many re-renders. React limits the number of renders to prevent an infinite loop.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.Why. A state update runs on every render. The update renders the component again, which runs the update again, and React stops the loop. Three patterns cause almost all of them.
1. A handler that is called instead of passed. React's own docs name this the most common cause.
- <Pressable onPress={setOpen(true)}>
+ <Pressable onPress={() => setOpen(true)}>2. An effect with no dependency array that sets state. It runs after every render, and a new object or array is always a change.
- useEffect(() => {
- setItems(data.filter((d) => d.visible));
- });
+ const items = useMemo(() => data.filter((d) => d.visible), [data]);Derive the value during render (or with useMemo) instead of copying it into state. If it really has to be state, give the effect the dependencies it reads.
3. An effect that changes the state it depends on.
- useEffect(() => {
- setCount(count + 1);
- }, [count]);
+ useEffect(() => {
+ if (count < limit) setCount(count + 1);
+ }, [count, limit]);The same happens when a dependency is an object or function created during render: it is new every time. Move it inside the effect, or wrap it in useMemo / useCallback.
Check your project. npx nativekeel reports these three patterns with file and line. It only reports the certain cases: a setter inside an if, after an early return, or with a value that does not change is left alone, because React stops when the value stays the same.
npx nativekeel