Top 20 React Errors & Fixes

<h2>Introduction</h2>
<p>React is one of the most popular frontend libraries, but beginners and even experienced developers often face common errors. In this guide, we’ll cover the top 20 React errors and how to fix them step by step.</p>

<h3>1. Invalid DOM Property</h3>
<pre><code>{`<div class="box"></div> // ❌ Wrong`}</code></pre>
<p><strong>Fix:</strong> Use <code>className</code> instead of <code>class</code>.</p>

<h3>2. setState is Not a Function</h3>
<p>Happens when you try calling <code>setState</code> on an undefined state hook.</p>
<pre><code>{`const [count, setCount] = useState(0);

setCount(count + 1); // ✅ Correct`}</code></pre>

<h3>3. Too Many Re-renders</h3>
<p>This occurs when <code>setState</code> is called inside the component body without conditions.</p>
<p><strong>Fix:</strong> Move <code>setState</code> into <code>useEffect</code> or event handler.</p>

<h3>4. Cannot Read Property of Undefined</h3>
<p>Usually caused by accessing nested object values without null checks.</p>
<pre><code>{`user?.profile?.name // ✅ Safe access`}</code></pre>

<h3>5. React Hook “useEffect” is Called Conditionally</h3>
<p>Hooks must always run in the same order. Don’t call inside <code>if</code> blocks.</p>

<h3>6. Invalid Hook Call</h3>
<p>Caused when React has multiple versions installed or hooks are used outside components.</p>

<h3>7. Keys Should Be Unique</h3>
<p>React needs unique <code>key</code> props in lists.</p>
<pre><code>{`items.map(item => <li key={item.id}>{item.name}</li>)`}</code></pre>

<h3>8. React Router “No Routes Matched”</h3>
<p>Occurs when route paths don’t match. Always use <code>BrowserRouter</code> and correct <code>Route</code>.</p>

<h3>9. Target Container is Not a DOM Element</h3>
<p>Caused when <code>root</code> element doesn’t exist.</p>
<pre><code>{`ReactDOM.createRoot(document.getElementById("root"))`}</code></pre>

<h3>10. useEffect Dependencies Missing</h3>
<p>React warns about missing dependencies in <code>useEffect</code>.</p>
<p><strong>Fix:</strong> Add them or use <code>useCallback</code>/<code>useMemo</code>.</p>

<h3>11. JSX Closing Tag Missing</h3>
<p>Always close self-closing tags.</p>
<pre><code>{`<img src="logo.png" /> // ✅`}</code></pre>

<h3>12. Props Undefined</h3>
<p>Occurs when props are not passed.</p>
<p><strong>Fix:</strong> Add default props or destructure safely.</p>

<h3>13. Event Handler Undefined</h3>
<pre><code>{`onClick={handleClick} // ✅ Ensure function exists`}</code></pre>

<h3>14. Cannot Update State on Unmounted Component</h3>
<p>Fix by cleaning up async tasks in <code>useEffect</code> cleanup.</p>

<h3>15. Controlled vs Uncontrolled Input</h3>
<p>Always provide <code>value</code> and <code>onChange</code> for controlled inputs.</p>

<h3>16. Component is Not Exported</h3>
<p>Check for <code>export default Component</code> or named export mismatch.</p>

<h3>17. Module Not Found</h3>
<p>Caused by wrong file path or missing dependency.</p>

<h3>18. React Strict Mode Double Rendering</h3>
<p>This is normal in development; use memoization to optimize.</p>

<h3>19. useNavigate / useHistory Hook Not Working</h3>
<p>Ensure component is wrapped with <code>Router</code>.</p>

<h3>20. useState Initial Value Undefined</h3>
<p>Always set an initial value to avoid undefined states.</p>

<h3>Conclusion</h3>
<p>By understanding these common React errors and their fixes, you’ll save hours of debugging time and write cleaner, more reliable code.</p>