Kent C. Dodds 🌌

@kentcdodds.com

53042 Followers 149 Following

Husband, 6x Dad, Latter-day Saint, Dev, Educator 🏹 http://EpicProduct.engineer ⚡️ http://EpicAI.pro 🌌 http://EpicWeb.dev 🚀 http://EpicReact.dev 🏆 http://TestingJavaScript.com

We have to walk away from the code - promo clip from Become an Epic Product Engineer.

How Sean Roberts prioritizes when everything feels urgent - promo clip from Become an Epic Product Engineer.

Running 10x faster in the wrong direction is not a win - promo clip from Become an Epic Product Engineer.

Old engineering books make better AI builders - promo clip from Become an Epic Product Engineer.

Is the mind computable? - promo clip from Become an Epic Product Engineer.

Domain knowledge beats guessing - promo clip from Become an Epic Product Engineer.

Sell the fireball, not the flower - promo clip from Become an Epic Product Engineer.

The biotech admins paying millions with zero visibility - promo clip from Become an Epic Product Engineer.

Measure success by what shipped last week is doing now - promo clip from Become an Epic Product Engineer.

Agent Conf 2026 speaker card for Kent C. Dodds — Warsaw, September 17–18

Curious engineers vs button pushers - promo clip from Become an Epic Product Engineer.

Shipping a tiny product from your phone with agents - promo clip from Become an Epic Product Engineer.

Simplicity is harder when AI builds fast - promo clip from Become an Epic Product Engineer.

What clients ask for is not always what they need - promo clip from Become an Epic Product Engineer.

The Gmail password-loading trick - promo clip from Become an Epic Product Engineer.

AI made apps easy, but quality still wins - promo clip from Become an Epic Product Engineer.

Creators vs consumers in software engineering - promo clip from Become an Epic Product Engineer.

Know your customer better than your code - promo clip from Become an Epic Product Engineer.

Demos beat slides when you need to show value - promo clip from Become an Epic Product Engineer.

Your users are not power users of your software - promo clip from Become an Epic Product Engineer.

Judgment LLMs don't have (yet) - promo clip from Become an Epic Product Engineer.

Study systems outside your lane - promo clip from Become an Epic Product Engineer.

What software architecture actually means - promo clip from Become an Epic Product Engineer.

Stop asking customers if your idea would solve their problem - promo clip from Become an Epic Product Engineer.

AI lets PMs change direction before the million-dollar miss - promo clip from Become an Epic Product Engineer.

Agents will route around your guardrails - clip from Chats with Kent.

Good DX is good UX for agents - clip from Chats with Kent.

Align your engineering with shared goals - clip from Chats with Kent.

Browser-to-website and agent-to-MCP-server shown side by side to illustrate parallel roles across different domains.

Kent taking a selfie with Michael Chan and Jack Harrington

Kent smiling in a suit with a US flag pin on his lapel

Blog post titled “Build Responsive MCP Servers” by Kent C. Dodds, showing the introduction about dynamic UI and server responsiveness.

Article titled “React Server Components: How We Got Here” by Kent C. Dodds, introducing the evolution of web architecture leading to RSCs.

User makes a request to Jarvis, which consults the MCP Search Engine to find relevant tools using user preferences, then sends the request and selected tools to the LLM, which returns a solution to Jarvis for the user. The process repeats until the user’s goal is met.

How the use Hook Works with Suspense
The use hook in React 19+ is the key to this pattern. Instead of using await, you pass a promise to use, and it either returns the resolved value (if ready) or suspends (if not):

function PhoneDetails() {
const details = use(phoneDetailsPromise)
// details is ready here!
}

Chat interface in Cursor shows a response explaining what you can do with “epicshop,” a workshop system for learning coding interactively. The response lists six capabilities: navigating workshop exercises, viewing instructions and context, seeing progress with code diffs, getting overviews, generating quizzes, and asking for guidance. A prompt below invites users to try any feature.

// Usage in a component:
function StatusBar() {
const isOnline = useOnlineStatus()
return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>
}

try {
const element = (
<div>
<h1>Calculator</h1>
<Calculator left={1} operator="+" right={2} />
<Calculator left={1} operator="-" right={2} />
</div>
)
} catch (error) {
// This won't catch anything!
}

React.useEffect(() => {
if (displayErrorMessage) usernameInputRef.current?.focus()
}, [displayErrorMessage, usernameInputRef.current])

Ah, we get a lint warning from the exhuastive-deps rule:

React Hook React.useEffect has an unnecessary dependency: 'usernameInputRef.current'.
Either exclude it or remove the dependency array.
Mutable values like 'usernameInputRef.current' aren't valid dependencies because
mutating them doesn't re-render the component.
eslint(react-hooks/exhaustive-deps)

The Old Way: Script Tag Soup

Back in the day, if you wanted a page that showed a list of products (rendered
on the server) and let users filter them with a search box (handled on the
client), you'd end up with something like this:

```html

<input type="search" id="search" />
<ul id="products">
<li>Product 1</li>
<li>Product 2</li>

</ul>


<script src="/static/search.js"></script>
<script>
window.initSearch({ selector: 'ul' })
</script>
```

You had to make sure your scripts loaded after the HTML, and that your
JavaScript could find and hook into the right DOM nodes. If you wanted to pass
data from the

Suppose you want to focus the input as soon as it appears. You might try this:

function MyComponent() {
const inputRef = useRef<HTMLInputElement>(null)
const [show, setShow] = useState(false)

return (
<div>
<button
onClick={() => {
setShow(true)
inputRef.current?.focus() // This probably won't work!
}}
>
Show
</button>
{show ? <input ref={inputRef} /> : null}
</div>
)
}