Don't call a React function component
Explains why calling a React function component directly causes a 'Rendered fewer hooks' error and how to fix it by using JSX syntax.
KentCDodds.com is the personal website and blog of Kent C. Dodds, a software engineer, educator, and open-source contributor known for his work in the React ecosystem. He writes about modern web development, testing, accessibility, performance, and developer experience, focusing on how to build reliable, maintainable, and scalable applications. Kent is the creator of popular libraries such as Testing Library and Remix, and his articles often highlight practical approaches to writing better React components, handling state, and improving user experience. Beyond tutorials, the site features courses, workshops, podcasts, and conference talks, all aimed at helping developers learn by doing. With his teaching-first philosophy and clear explanations, KentCDodds.com has become one of the most trusted learning resources in the React and JavaScript community.
189 articles from this blog
Explains why calling a React function component directly causes a 'Rendered fewer hooks' error and how to fix it by using JSX syntax.
A personal reflection on the author's life journey through the 2010s, covering career, family, and personal growth.
Article argues that code quality directly impacts user experience by enabling faster feature delivery and fewer bugs.
A guide on enabling React's experimental Concurrent Mode, including installation steps and API usage.
A guide explaining how React's key prop works, using a practical form example to demonstrate its effect on component state and re-rendering.
Learn how to use Web Workers to run intensive JavaScript tasks off the main thread, preventing a frozen UI and improving app performance.
An open source developer draws parallels between community building in software and neighborhood revitalization, emphasizing kindness and proactive effort.
A guide on how to start adding tests to a large, existing codebase, focusing on the Testing Trophy methodology for the best return on investment.
Explains how to write resilient UI tests using user-centric queries instead of brittle CSS selectors, with examples in React.
Explains how colocating React state can improve app performance by reducing unnecessary re-renders, with code examples.
Explains the benefits of deriving state in React instead of synchronizing multiple state variables, using a tic-tac-toe game as an example.
A guide on using the React DevTools Profiler to measure app performance, including a warning to profile in production mode for accurate results.
A guide to React performance optimization, explaining the difference between the render and commit phases and why focusing on slow renders is key.
A technical guide explaining how to re-implement the React useState hook using the useReducer hook for educational purposes.
A guide to common mistakes when using React Hooks and practical advice on how to avoid them for better code.
The article argues against writing many small, single-assertion tests for React components, advocating for fewer, more comprehensive tests.
A software engineer explains that experience comes from solving diverse problems, not just time, and suggests ways to find them.
A guide on effective software testing: write tests, avoid 100% coverage, and focus on integration tests for confidence.
A guide on when to split a large React component into smaller ones, focusing on solving real problems rather than premature abstraction.
A guide explaining the difference between props and state in React components, including how to use them correctly.