Course

Kent's Blog Posts as Screencasts

1
Implement a simple Finite State Machine library in JavaScript
9m 30s
2
Array reduce vs chaining vs for loop
6m 13s
3
Reduce cognitive load for readers of your code by avoiding nesting of closures
3m 15s
4
Fix "React Error: Rendered fewer hooks than expected"
4m 17s
5
Get started with Web Workers
3m 18s
6
Organization of Authentication State in React Apps
5m 16s
7
Get started with Netlify Serverless Functions
3m 27s
8
Implement Inversion of Control
7m 11s
9
Implement useState with useReducer
5m 40s
10
Use JavaScript Modules in the browser
8m 30s
11
Fix the "not wrapped in act(...)" warning when testing the useImperativeHandle Hook
2m 1s
12
Fix the "not wrapped in act(...)" warning with Jest fake timers
2m 51s
13
Fix the "not wrapped in act(...)" warning when testing Custom Hooks
2m 2s
14
Fix the "not wrapped in act(...)" warning
6m 5s
15
Create App DevTools to enhance development productivity
9m 50s
16
Make Your Test Fail
4m 16s
17
Use a status enum instead of booleans
7m 43s
18
When to useState instead of useReducer
5m 2s
19
When to useReducer instead of useState
10m 6s

Fix "React Error: Rendered fewer hooks than expected"

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

In this lesson we'll see an interesting situation where we're actually calling a function component and getting a dreaded React error: "Rendered fewer hooks than expected." We'll learn why that is happening, how it can be avoided, and how our "workaround" fixes the problem and avoids potential bugs.

This is based on my blog post: Don't call a React function component

View code for this lesson

Kent's Blog Posts as Screencasts

Fix "React Error: Rendered fewer hooks than expected"

Social Share Links