Kent C. Dodds 🌌
LightNews LightNews
banner
kentcdodds.com
Kent C. Dodds 🌌
@kentcdodds.com
26K followers 150 following 1.2K posts
Improving 🌎 with quality software · Husband, 5x Father, Latter-day Saint, Web Dev, Educator, Microsoft MVP

🌌 https://EpicWeb.dev
🚀 https://EpicReact.dev
🏆 https://TestingJavaScript.com
Posts Replies Media Videos
kentcdodds.com
After many long years, the most widely used React framework in the world has React Server Components support! And the migration story is iterative, not "big bang" 💥

I think React Router's take on RSC is really great. Read the article and watch the whole video here: www.epicreact.dev/react-router...
December 1, 2025 at 4:06 PM
kentcdodds.com
Did you know that `preload="auto"` on a video element won't work if the video is conditionally rendered? 🤔 React's new `` component solves this problem (and many others) elegantly. Here's how.

Read the article watch the whole video here: www.epicreact.dev/use-react-ac...
November 29, 2025 at 3:05 PM
kentcdodds.com
Did you know React 19's ViewTransition component can create smooth, animated transitions between pages? Just wrap elements with the same name prop and React handles the rest. No complex animation libraries needed! 🎬

👇

www.epicreact.dev/use-react-vi...
November 28, 2025 at 5:25 PM
kentcdodds.com
The Website for Agents: MCP Servers

Let's talk about it... www.epicai.pro/the-website-...
Browser-to-website and agent-to-MCP-server shown side by side to illustrate parallel roles across different domains.
November 21, 2025 at 8:04 PM
kentcdodds.com
Got a React Router app? Want to use React Server Components?

I'm going to show you how to incrementally adopt RSC and Server Functions with React Router!

Going on stage in a couple minutes! Watch live: www.youtube.com/live/p9OcztR... 👈
Kent taking a selfie with Michael Chan and Jack Harrington
October 8, 2025 at 10:00 PM
kentcdodds.com
In a couple hours (6pm Mountain) I'll be singing with 350+ other performers from 39 different nations in front of 21,000 people. We'll be wearing flag pins.

See if you can find yours on the singers!

🇦🇷🇦🇺🇧🇴🇧🇷🇨🇦🇨🇱🇨🇳🇭🇰🇨🇴🇨🇩🇸🇻🇫🇯🇫🇮🇩🇪🇬🇹🇭🇳🇮🇳🇮🇹🇯🇲🇯🇵🇲🇽🇳🇿🇳🇬🇵🇪🇵🇭🇵🇹🇵🇷🇨🇬🇼🇸🇿🇦🇰🇷🇵🇫🇹🇭🇳🇱🇹🇴🇺🇦🇺🇸🇺🇾🇻🇪

www.youtube.com/live/TOhNW4U...
Kent smiling in a suit with a US flag pin on his lapel
October 4, 2025 at 8:16 PM
kentcdodds.com
Quick demo of the quiz feature you can look forward to using when you go through any Epic Workshop (those on EpicReact 🚀, EpicWeb 🌌, and EpicAI ⚡). Works in any language too 🔥

AI **assisted** learning is phenomenal.
September 5, 2025 at 10:56 PM
kentcdodds.com
It's official! Master the Model Context Protocol has launched on EpicAI! Join the cohort with thousands of other developers to be on the leading edge of user interaction with MCP! Learn more here: www.epicai.pro/cohorts/mast...
September 5, 2025 at 3:35 PM
kentcdodds.com
A week from today, we're going to launch into the next phase of building excellent user experiences. Literally together!

Join me for a new kind of learning experience, and launch it with me on September 5th at 8:30AM Pacific time. Hit the bell on the YouTube live stream! youtube.com/live/6_Rz7c2...
August 29, 2025 at 5:51 PM
kentcdodds.com
Do you think of your MCP server as a static API or as a dynamic website replacement? The difference matters for user experience. Here's how change notifications make AI apps truly responsive: www.epicai.pro/build-respon...
Blog post titled “Build Responsive MCP Servers” by Kent C. Dodds, showing the introduction about dynamic UI and server responsiveness.
July 21, 2025 at 10:24 PM
kentcdodds.com
Do you know how we got from full page reloads to React Server Components? The journey from MPAs → SPAs → PESPAs → RSCs reveals why each architectural shift was necessary and how we're finally getting the best of all worlds.

www.epicreact.dev/react-server...
Article titled “React Server Components: How We Got Here” by Kent C. Dodds, introducing the evolution of web architecture leading to RSCs.
July 21, 2025 at 10:06 PM
kentcdodds.com
One of the critical bits for the true Jarvis-like AI Assistant for the masses future I envision is solving tool overloading through a "Google for MCP". People are working on this problem. Huge upside if it works.

Here's how I envision that working.

epicai.pro/mcp-search-e... 📝
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.
July 7, 2025 at 2:42 PM
kentcdodds.com
How does the `use` hook trigger a component to "suspend" and how can `details` be the resolved value from the promise without using `await`?

Learn this as well as how to declaratively manage error/loading states in my latest Epic React article! www.epicreact.dev/how-react-su...
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! }
June 9, 2025 at 10:45 PM
kentcdodds.com
The epicshop MCP server has been updated and this is a legit learning companion for anyone going through Epic Workshop experiences!

Here's some screenshots using it in the React Hooks workshop from Epic React 🔥
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. Chat interface in Cursor shows a user asking for a summary of topics in a workshop. The assistant visibly calls the get_workshop_context tool from the epicshop MCP server to retrieve structured workshop data. The response dynamically renders a detailed outline of the React Hooks workshop, including sections on Managing UI State, Side-Effects, Lifting State, and DOM Side-Effects. This demonstrates how the assistant integrates with the epicshop backend to deliver precise, contextual responses powered by real-time data from the MCP server. Cursor chat shows a user asking for details on exercise 3. The assistant visibly calls the get_exercise_context tool from the epicshop MCP server to fetch precise content. The returned answer outlines key concepts from the “Lifting State” exercise: lifting state up to a common parent, colocating state for performance, and a hands-on scenario involving lifting state and a useEffect. This interaction showcases how the MCP server enables rich, targeted responses by dynamically accessing workshop-specific content. 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.
May 31, 2025 at 8:43 PM
kentcdodds.com
How would you build useOnlineStatus()?

If you said useState/useEffect, you really need to read this: www.epicreact.dev/use-sync-ext...

If you've ever struggled with useSyncExternalStore, check that out because we go through common mistakes and questions!
// Usage in a component: function StatusBar() { const isOnline = useOnlineStatus() return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1> }
May 28, 2025 at 7:15 PM
kentcdodds.com
I'm excited to announce the EpicAI.pro logo ⚡
May 27, 2025 at 7:49 PM
kentcdodds.com
Do you know why this won't handle errors thrown in the Calculator component and what to do instead? Let's do a bit of a deep dive on Epic React about this: www.epicreact.dev/why-react-er...
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! }
May 27, 2025 at 7:32 PM
kentcdodds.com
Why do you get an error when you include a ref in your dependency array? Let's talk about it: www.epicreact.dev/why-you-shou...
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)
May 24, 2025 at 3:05 PM
kentcdodds.com
Who remembers building web UI this way? Now we have the beauty that is composition across the network chasm with React Server Components (coming to React Router soon!). Check out how this would look with RSCs in my Epic React blog post: www.epicreact.dev/composing-se...
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 <!-- Server-rendered HTML --> <input type="search" id="search" /> <ul id="products"> <li>Product 1</li> <li>Product 2</li> <!-- ... --> </ul> <!-- Client-side search functionality --> <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
May 23, 2025 at 1:12 PM
kentcdodds.com
Do you know why this won't focus the input and how to fix it? Learn about that with more practical examples in my latest article on Epic React: epicreact.dev/mastering-fo...
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> ) }
May 20, 2025 at 9:22 PM
kentcdodds.com
Do you know the answer to @ricky.fm's question? (No, it's not semicolons 🤭).

Let's talk about it on Epic React! www.epicreact.dev/preserving-a...
Bluesky post from user Ricky (@ricky.fm) with profile photo of a person looking to the side. Post content: “what’s wrong with this code: if (props.wrap) { return ( {children} ) } return children” Timestamp: May 18, 2025 at 4:16 PM. Engagement: 1 quote, 30 likes, 32 replies. First reply by Ricky: “say semicolon you get blocked” (25 likes). Reply from White Vaille: “s… sem-se… semni……….”
May 19, 2025 at 1:21 PM
kentcdodds.com
I'm not saying that you shouldn't translate the strings in your MCP server, but I'm not not saying that 😏

www.epicai.pro/ai-and-mcp-l...
May 15, 2025 at 5:59 PM
kentcdodds.com
Not everyone wants to be a "prompt engineer," and they don't have to be. Check out how MCP prompts makes it possible for regular users to get the LLM to perform complex tasks without having to make complex prompts and read the article for how to make your own! www.epicai.pro/prompt-engin...
May 12, 2025 at 6:21 PM
kentcdodds.com
Today's Epic React article is about `useOptimistic` which we learn about in the Suspense and React Server Components workshop. Read the article for three examples of useOptimistic with React 19.

epicreact.dev/use-optimist...
Booking a Flight Suppose you want to let users book a flight, and you want to show progress through multiple steps—like "reserving seat", "processing payment", and "sending confirmation"—with optimistic UI updates for both the booking state and the progress message. You can accept all async logic and step messages as props, making the component flexible and focused on UI state. import { useOptimistic, startTransition } from 'react' import { reserveSeat, processPayment, sendConfirmation } from './api' function BookFlight() { const [message, setMessage] = useOptimistic('Ready to book') async function handleBooking(formData: FormData) { setMessage('Reserving seat...') await reserveSeat(formData.get('flight')) setMessage('Processing payment...') await processPayment(formData.get('passenger')) setMessage('Sending confirmation...') const bookingId = await sendConfirmation( formData.get('passenger'), formData.get('flight'), ) setMessage('Booking complete! Redirecting...')
May 12, 2025 at 5:23 PM
kentcdodds.com
Oh, hey there! I want you to join me for a workshop. Last time this sold out in only 5 hours (‼️) and I've got a 40% discount on this workshop until Sunday, so don't delay! See you on the 15th of May! www.epicai.pro/mcp-workshop...
April 18, 2025 at 7:23 PM