react Errors

•Ensure hooks are only called at the top level of a function component, not inside loops, conditions, or nested functions
•Check for multiple copies of React in your bundle: run `npm ls react` and deduplicate

react3 fixes

Too many re-renders (infinite loop)

Too many re-renders\. React limits the number of renders to prevent an infinite loop

•Avoid calling setState directly in the render body — wrap in useEffect or event handler
•Ensure onClick passes a function reference, not a function call: `onClick={() => fn()}` not `onClick={fn()}`

react3 fixes

Missing key prop in list

Each child in a list should have a unique "key" prop

•Add a unique `key` prop to each element returned in a .map() call
•Use a stable unique identifier (id) instead of array index as key

react3 fixes

Cannot update state on unmounted component

Can't perform a React state update on an unmounted component

•Return a cleanup function from useEffect to cancel async operations (e.g., AbortController)
•Use a mounted ref flag: `const mounted = useRef(true)` and check before setState

react3 fixes

useEffect missing dependency (exhaustive-deps)

React Hook useEffect has a missing dependency

•Add the missing variable to the dependency array
•Wrap the dependency in useCallback or useMemo to stabilize its reference

react3 fixes

Hook called outside component or custom hook

React Hook .+ cannot be called at the top level

•Move the hook call inside a function component or a custom hook (function starting with 'use')
•Ensure the file exports a component or custom hook, not a plain function

react3 fixes

Adjacent JSX elements not wrapped

Adjacent JSX elements must be wrapped in an enclosing tag

•Wrap sibling elements in a parent `<div>` or `<section>`
•Use a React Fragment: `<>...</>` or `<React.Fragment>...</React.Fragment>`

react3 fixes

Uncontrolled to controlled input switch

A component is changing an? uncontrolled input to be controlled

•Initialize state with an empty string instead of undefined: `useState('')` not `useState()`
•Ensure the value prop is never undefined — use `value={val || ''}` as fallback

react3 fixes

Controlled to uncontrolled input switch

A component is changing a controlled input to be uncontrolled

•Ensure the value prop never becomes undefined — provide a fallback empty string
•Check that state isn't being set to undefined anywhere in your handlers

react3 fixes

React hydration mismatch

Hydration failed because the initial UI does not match what was rendered on the server

•Ensure server and client render identical HTML — avoid Date.now(), Math.random() in initial render
•Use useEffect for browser-only content (window, localStorage) so it only runs on client

react3 fixes

Complex expression in useEffect deps

React Hook .+ has a complex expression in the dependency array

•Extract the complex expression into a variable before the hook
•Use useMemo to compute the derived value and pass that to the dependency array

react3 fixes

Object rendered as React child

Objects are not valid as a React child

•Convert the object to a string: use JSON.stringify(obj) or access a specific property
•If rendering a list, map the array to JSX elements instead of rendering the array directly

react3 fixes

Maximum update depth exceeded

•Check for setState calls inside useEffect that trigger the same effect (circular update)
•Ensure event handlers don't unconditionally call setState that re-triggers rendering

react3 fixes

Cannot read properties of undefined/null

Cannot read propert(y|ies) of (undefined|null)

•Add optional chaining: `obj?.property` instead of `obj.property`
•Add a null check or default value before accessing the property

react3 fixes

Hooks rendered conditionally (different count)

Rendered fewer hooks than expected|Rendered more hooks than expected

•Never place hooks inside if/else blocks, loops, or after early returns
•Move conditional logic inside the hook, not around it