React Hooks Explained
📰 Medium · JavaScript
by Someone Who Got Them Wrong First Continue reading on Medium »
Full Article
Title: React Hooks Explained
URL Source: https://fagnerbrack.medium.com/react-hooks-explained-a8702b9e8dc2?source=rss------javascript-5
Published Time: 2026-04-27T17:01:02Z
Markdown Content:
# React Hooks Explained. by Someone Who Got Them Wrong First | by Fayner Brack | Apr, 2026 | Medium
[Sitemap](https://fagnerbrack.medium.com/sitemap/sitemap.xml)
[Open in app](https://play.google.com/store/apps/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------)
Sign up
[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)
[](https://medium.com/?source=post_page---top_nav_layout_nav-----------------------------------------)
Get app
[Write](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------)
[Search](https://medium.com/search?source=post_page---top_nav_layout_nav-----------------------------------------)
Sign up
[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

# React Hooks Explained
## by Someone Who Got Them Wrong First
[](https://fagnerbrack.medium.com/?source=post_page---byline--a8702b9e8dc2---------------------------------------)
[Fayner Brack](https://fagnerbrack.medium.com/?source=post_page---byline--a8702b9e8dc2---------------------------------------)
3 min read
·
1 hour ago
[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fa8702b9e8dc2&operation=register&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&user=Fayner+Brack&userId=7ef192b7f545&source=---header_actions--a8702b9e8dc2---------------------clap_footer------------------)
--
[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fa8702b9e8dc2&operation=register&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=---header_actions--a8702b9e8dc2---------------------bookmark_footer------------------)
[Listen](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3Da8702b9e8dc2&operation=register&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=---header_actions--a8702b9e8dc2---------------------post_audio_button------------------)
Share

An image of a timeline showing about 2000 requests per second. At 14:23:07 UTC, after the deployment, it spikes to more than 10000 requests per second. An alert is triggered.
Want to come back later? Save this to [readplace.com](https://readplace.com/view/https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2?utm_source=fagnerbrack.com&utm_content=top-text).
This is a story of many years ago. When I shipped an infinite render loop to production because I didn’t understand the basics of useEffect. Also due to a lack of proper tests 🤫.. buttt the point here is what that infinite render loop taught me about React’s actual programming model.
The component looked fine locally. It fetched user data on mount and done. In production, it hammered our API with thousands of requests per second. The monitoring dashboard lit up so I reverted the deploy within minutes.
I wrote something along the lines of:
useEffect(() => {
fetch('/api/users/' + userId)
.then(res => res.json())
.then(data
URL Source: https://fagnerbrack.medium.com/react-hooks-explained-a8702b9e8dc2?source=rss------javascript-5
Published Time: 2026-04-27T17:01:02Z
Markdown Content:
# React Hooks Explained. by Someone Who Got Them Wrong First | by Fayner Brack | Apr, 2026 | Medium
[Sitemap](https://fagnerbrack.medium.com/sitemap/sitemap.xml)
[Open in app](https://play.google.com/store/apps/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------)
Sign up
[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)
[](https://medium.com/?source=post_page---top_nav_layout_nav-----------------------------------------)
Get app
[Write](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------)
[Search](https://medium.com/search?source=post_page---top_nav_layout_nav-----------------------------------------)
Sign up
[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

# React Hooks Explained
## by Someone Who Got Them Wrong First
[](https://fagnerbrack.medium.com/?source=post_page---byline--a8702b9e8dc2---------------------------------------)
[Fayner Brack](https://fagnerbrack.medium.com/?source=post_page---byline--a8702b9e8dc2---------------------------------------)
3 min read
·
1 hour ago
[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fa8702b9e8dc2&operation=register&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&user=Fayner+Brack&userId=7ef192b7f545&source=---header_actions--a8702b9e8dc2---------------------clap_footer------------------)
--
[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fa8702b9e8dc2&operation=register&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=---header_actions--a8702b9e8dc2---------------------bookmark_footer------------------)
[Listen](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3Da8702b9e8dc2&operation=register&redirect=https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2&source=---header_actions--a8702b9e8dc2---------------------post_audio_button------------------)
Share

An image of a timeline showing about 2000 requests per second. At 14:23:07 UTC, after the deployment, it spikes to more than 10000 requests per second. An alert is triggered.
Want to come back later? Save this to [readplace.com](https://readplace.com/view/https%3A%2F%2Ffagnerbrack.com%2Freact-hooks-explained-a8702b9e8dc2?utm_source=fagnerbrack.com&utm_content=top-text).
This is a story of many years ago. When I shipped an infinite render loop to production because I didn’t understand the basics of useEffect. Also due to a lack of proper tests 🤫.. buttt the point here is what that infinite render loop taught me about React’s actual programming model.
The component looked fine locally. It fetched user data on mount and done. In production, it hammered our API with thousands of requests per second. The monitoring dashboard lit up so I reverted the deploy within minutes.
I wrote something along the lines of:
useEffect(() => {
fetch('/api/users/' + userId)
.then(res => res.json())
.then(data
DeepCamp AI