# React Hooks Published articles for React Hooks. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## What's New in Apollo Client 4.2 DevFeed: [What's New in Apollo Client 4.2]() Original publisher: [Read original article]() Author: Jerel Miller Published: 2026-05-27T11:33:11Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [TypeScript](), [React Hooks](), [browser]() Tags: [announce](), [announcement](), [apollo-client](), [browser](), [react-hooks](), [release](), [typescript]() ### AI overview Apollo Client 4.2 introduces type-safe default options and event-based refetching. The release also deprecates generic arguments in hooks and core APIs to support the new type-safety model. ### Source excerpt Discover Apollo Client 4.2's type-safe default options and event-based refetching. Eliminate type mismatches and automatically refetch on window focus. Learn how. ## React Server Actions with Toast Feedback DevFeed: [React Server Actions with Toast Feedback]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-04T06:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial](), [User Experience]() Tags: [code](), [error-handling](), [how-to](), [notifications](), [react](), [react-hooks](), [react-server-action-toast](), [react-server-component](), [real-time](), [time](), [tutorial]() ### AI overview This tutorial explains how to display toast notifications when invoking React Server Actions. It builds a React Server Component that fetches user data and a Client Component for upvoting, downvoting, and deleting entries, with toast feedback and error handling. ### Source excerpt Learn how to display toast notifications from React Server Actions in React (and Next.js) ... ## React Function Components by Example \[2026\] DevFeed: [React Function Components by Example \[2026\]]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2024-12-23T05:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial](), [JavaScript](), [TypeScript]() Tags: [event](), [guide](), [react](), [react-arrow-function-component](), [react-function-component](), [react-functional-component](), [react-hooks](), [react-js-function-component](), [refs](), [state](), [tutorial](), [typescript]() ### AI overview A tutorial on React function components, explaining how JavaScript functions return JSX and how components are composed. It covers props, state with Hooks, event handlers, refs, and TypeScript for modern React applications. ### Source excerpt Learn React Function Components (also called Functional Components) by example: props, state with Hooks, event handlers, refs, TypeScript, and more for modern React. ## How to fetch data with React Hooks DevFeed: [How to fetch data with React Hooks]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2024-10-21T11:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial](), [data](), [client](), [axios](), [API](), [Promise]() Tags: [api](), [async](), [await](), [axios](), [beginners](), [browser](), [command-line](), [component](), [effect](), [fetch](), [fundamentals](), [how-to](), [learn](), [libraries](), [react](), [react-fetch-data-hooks](), [react-hooks](), [state](), [tutorial]() ### AI overview A tutorial on fetching data in client-side React with built-in React Hooks. It explains state and effect management, builds a reusable custom data-fetching hook using the Hacker News API, and shows how to use axios or the browser's native fetch API, including handling asynchronous effects and cleanup functions. ### Source excerpt Learn the fundamentals about data fetching in client-side React with React Hooks ... ## Apollo Client 3.8 Adds React 18 Suspense Integration and New Data-Fetching Features DevFeed: [Apollo Client 3.8 Adds React 18 Suspense Integration and New Data-Fetching Features]() Original publisher: [Read original article]() Author: Jerel Miller Published: 2023-08-07T12:07:43Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [React](), [React Hooks](), [GraphQL](), [Error Handling]() Tags: [announcement](), [apollo-client](), [error-handling](), [errors](), [graphql](), [react](), [react-hooks](), [release]() ### AI overview Apollo Client 3.8 introduces React 18 Suspense integration with three new React hooks, along with query document transforms, automatic removal of fields from variables, improved error extraction, type-safe query skipping, and selective update skipping. ### Source excerpt Today we're thrilled to announce the release of Apollo Client 3.8 with long-awaited support for React 18's Suspense features! This is our biggest minor release yet and is jam packed with lots of great features and updates. This release is a culmination of 16 alphas, 8 betas, and 3 release candidates. Thank you to everyone who has tried the new features and provided us with valuable input! ## How to Structure and Organize a React Application DevFeed: [How to Structure and Organize a React Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-06-23T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [structure](), [React Hooks](), [Redux](), [React Router](), [styled-components](), [Jest](), [testing-library](), [Authentication]() Tags: [authentication](), [css](), [how-to](), [javascript](), [jest](), [react](), [react-hooks](), [react-router](), [redux](), [state-management](), [structure]() ### AI overview This tutorial presents an opinionated, feature-focused directory structure for organizing large-scale production React applications. It explains how to separate global shared components from feature-specific code and discusses accompanying choices for Redux, React Router, styling, testing, and authentication. ### Source excerpt There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the... ## Manipulating Screen Brightness on iOS and Android with Ionic React DevFeed: [Manipulating Screen Brightness on iOS and Android with Ionic React]() Original publisher: [Read original article]() Author: Alejandra Del Valle Published: 2020-08-20T19:06:20Z Content type: tutorial Language: en Sources: [RBI Tech]() Topics: [Ionic](), [React](), [React Hooks](), [Android](), [iOS](), [PWA](), [Web Components](), [Development]() Tags: [android](), [components](), [development](), [how-to](), [ionic](), [ios](), [mobile-app-development](), [pwa](), [react](), [react-hooks]() ### AI overview This tutorial discusses controlling screen brightness on iOS and Android using Ionic React and Ionic React Hooks, including the package's Capacitor API wrappers and support for shared-codebase applications across mobile, desktop, and PWA targets. ### Source excerpt Manipulating Screen Brightness on iOS and Android Devices Undoubtedly one of the most annoying side effects our phones have is its ability to change screen brightness dynamically. Whether it's a setting enabled on your device to automatically adjust brightness based on your environment, or an app you downloaded manipulates it based on its needs, sometimes it's just out of your control. Maybe you're an avid digital content creator and having your screen brightness at its max is to help your content be "pixel-perfect" and edited just the way you want. Maybe you're visiting a store and need to scan your screen to quickly and easily pay for something without fumbling through your wallet or purse. Or, maybe you're at a show or at home for a movie night and having your screen brightness as low as possible is important to one, not blind you, and two, not blind your neighbors. Whatever the backstory, it's important for the apps we use to consider how we use our phones in our day-to-day lives to create a seamless experience that users will enjoy. Let's look at how we can help with this experience in native development using Ionic React with Ionic React Hooks (recently renamed to React Hooks for Capacitor). Keep reading if you have basic experience with React and React Hooks. If not, I would suggest getting familiar with React and then hop back on over! Why Ionic React? Short answer? Ionic React is ultimately just... React. Music to my ears. Ionic React is also built using web components, making it compatible with a multitude of web libraries and supports iOS, Android, Desktop, and PWA (i.e. progressive web apps) all by using one shared codebase (I'm hearing music again...). Ionic React Hooks Re-introduced Ionic announced their launch of Ionic React Hooks back in December of 2019. It has recently been renamed and moved to the Capacitor Community org -- @capacitor-community/react-hooks. This package provides a collection of wrappers around Capacitor APIs along with a few other Ioni ## Apollo Client \[React\]-- How to Query on Click DevFeed: [Apollo Client \[React\]-- How to Query on Click]() Original publisher: [Read original article]() Author: Khalil Stemmler Published: 2020-02-24T18:54:00Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [GraphQL](), [React Hooks](), [React](), [API]() Tags: [api](), [apollo-client](), [article](), [code](), [graphql](), [how-to](), [react](), [react-hooks]() ### AI overview A tutorial showing how to manually trigger client-side GraphQL queries in response to a button click using Apollo Client 3 with React Hooks and the Countries API. ### Source excerpt Sometimes, you don't want to fetch data right away- but instead, you'd like to fetch data manually in response to some sort of event, like a button click! In this quick article, I'll show you how to use the hook to manually trigger client-side GraphQL queries. Project setup & demo We're using Apollo Client 3 with React Hooks, and Trevor Blades' Countries API. ## On let vs const DevFeed: [On let vs const]() Original publisher: [Read original article]() Published: 2019-12-22T00:00:00Z Content type: opinion Language: en Sources: [Dan Abramov]() Topics: [JavaScript](), [Code](), [React Hooks]() Tags: [eslint](), [immutability](), [javascript](), [mutation](), [react](), [react-hooks]() ### AI overview This article examines the debate over using JavaScript let versus const. It summarizes arguments about reducing reassignment-related bugs, teaching mutation and assignment distinctions, React Hooks data flow, performance claims, and preserving intent, then presents the author's personal conclusion. ### Source excerpt So which one should I use? ## GraphQL Summit Takeaways on Adoption, Architecture, and Caching DevFeed: [GraphQL Summit Takeaways on Adoption, Architecture, and Caching]() Original publisher: [Read original article]() Author: Khalil Stemmler Published: 2019-11-14T18:39:44Z Content type: article Language: en Sources: [Apollo Blog]() Topics: [GraphQL](), [API](), [apollo-client](), [Caching](), [migration](), [React Hooks](), [Developer experience](), [developer velocity](), [React Native](), [Redux]() Tags: [apollo](), [apollo-client](), [caching](), [can](), [code](), [community](), [developer-experience](), [developer-velocity](), [development](), [graphql](), [migration](), [react](), [react-hooks](), [redux](), [rest](), [server](), [summit]() ### AI overview The article summarizes themes from GraphQL Summit, including GraphQL adoption and incremental migration from REST and Redux, architectural benefits of the data graph, the Apollo and React Hooks stack, deployment challenges, federation, schema change validation, and caching. ### Source excerpt This year, I flew out to San Francisco to attend (and help host!) my very first GraphQL Summit. As a Canadian flying to San Francisco for the first time, I was delighted to escape the Toronto cold to explore a new city, meet my awesome new Apollo colleagues, hang out with puppies (oh yeah--we had a puppy booth 🐶), chat with devs from around the world, and of course learn everything I could about the present and future of GraphQL. ## Meet our speakers for GraphQL Summit 2019! DevFeed: [Meet our speakers for GraphQL Summit 2019!]() Original publisher: [Read original article]() Author: Julia Black Published: 2019-08-13T18:22:00Z Content type: news Language: en Sources: [Apollo Blog]() Topics: [GraphQL](), [Front end](), [React Hooks]() Tags: [3](), [caching](), [community](), [conference](), [frontend](), [graphql](), [learning](), [networking](), [react](), [react-hooks](), [speakers](), [state](), [summit](), [talks]() ### AI overview Apollo announces speakers and sessions for GraphQL Summit 2019, including more than 60 technical talks across three tracks, along with scholarship programs, contributor passes, office hours, training bootcamps, and other conference activities. ### Source excerpt GraphQL Summit, held in SF on October 30 and 31, is the world's largest conference dedicated to GraphQL. This year will feature over 60 technical talks across 3 tracks, selected to further your GraphQL knowledge with educational sessions that provide practical next steps for your next project. And with 1,200 attendees, the networking and learning opportunities will be many. ## Apollo Client, now with React Hooks DevFeed: [Apollo Client, now with React Hooks]() Original publisher: [Read original article]() Author: Hugh Willson Published: 2019-08-06T22:46:00Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [React Hooks](), [React](), [Tutorial]() Tags: [announcement](), [api](), [apollo-client](), [react](), [react-hooks](), [tutorial]() ### AI overview Apollo Client adds React Hooks, giving React developers a simpler way to fetch data and manage mutations while retaining the existing higher-order component and render prop APIs. ### Source excerpt Our mission is to make Apollo Client the most modern and frictionless state management solution for React developers. As the React community has evolved and pioneered new UI development best practices over time, we've ensured that Apollo Client adopts and upholds those practices. In keeping with that tradition, today we're thrilled to announce the addition of React Hooks to Apollo Client! ## Discovering patterns with React hooks DevFeed: [Discovering patterns with React hooks]() Original publisher: [Read original article]() Author: m@peka.la (Maciek Pekala) Published: 2019-05-13T12:15:55Z Content type: article Language: en Sources: [Pony Foo]() Topics: [React Hooks](), [React](), [hooks](), [ui]() Tags: [best-practices](), [coding](), [components](), [hooks](), [patterns](), [react](), [react-hooks]() ### AI overview An exploration of patterns that emerge when building stateful React components with hooks. The article introduces the author's Choco pattern, which combines Context, a Hook, and a Component for top-level, centralized, unique UI widgets that expose functionality to other application components. ### Source excerpt One of the things I enjoy the most about coding is discovering patterns. Being aware and mindful of the patterns emerging in your codebase can make it easier to keep that codebase consistent, readable and easy to navigate. Most patterns will remain unspoken, and some, that prove notably elegant, are named and promoted as best practices. Others might even be candidates for a basis of a new abstraction, although I recommend restraint as it's worth remembering that abstractions are expensive. If you're not familiar with the topic or React hooks, there is plenty of introductory as well as in-depth materials out there. I can also shamelessly recommend my talk on hooks from a recent React Copenhagen meetup. What follows assume at least some understanding of what hooks are and how to use them. Pattern extinction level event Discovering new patterns is relatively rare when working with established technologies, but every now and then a new idea comes up that stirs things up within some ecosystem. Enter React hooks. Hooks enable a drastically different way to build stateful components in React, which means that they also invalidate 1 a lot of the established patterns. However, being an exceptionally well thought-through and composition-friendly abstraction, hooks enabled new, elegant patterns to emerge. Over the last few months, I've been building apps with hooks and I've been having a lot of fun discovering these patterns. I'd like to share one, that I've grown especially fond of. For the lack of a better name, and for sole the purpose of this blog post, let's call it the Choco pattern (from Context, HOok, COpomonent). The pattern comes useful when you need a UI widget which is top-level, centralised and unique across the application and needs to expose some functionality to the rest of the components in the app. It might sound vague at the moment, so let's try to go through solving a concrete problem where I noticed the Choco pattern manifest itself. Exhibit A: Feature tog ## How Are Function Components Different from Classes? DevFeed: [How Are Function Components Different from Classes?]() Original publisher: [Read original article]() Published: 2019-03-03T00:00:00Z Content type: article Language: en Sources: [Dan Abramov]() Topics: [React](), [React Hooks](), [Programming]() Tags: [classes](), [components](), [hooks](), [react](), [react-hooks](), [refactor]() ### AI overview This article explains how React function components differ from class components, focusing on their mental models and how function components capture rendered values. It notes that Hooks changed the feature comparison, while performance differences are generally negligible and depend more on the code than on the component style. ### Source excerpt They're a whole different Pokémon. ## Coping with Feedback DevFeed: [Coping with Feedback]() Original publisher: [Read original article]() Published: 2019-03-02T00:00:00Z Content type: opinion Language: en Sources: [Dan Abramov]() Topics: [React Hooks](), [React](), [hooks]() Tags: [best-practices](), [react](), [react-hooks]() ### AI overview The author reflects on the pressure and emotional toll of maintaining React Hooks after its stable release, including the challenge of documenting best practices and responding to user feedback. They share personal routines that seem to help manage stress and sleeplessness, such as limiting coffee, avoiding late-night arguments, and keeping regular meals. ### Source excerpt Sometimes I can't fall asleep. ## Making setInterval Declarative with React Hooks DevFeed: [Making setInterval Declarative with React Hooks]() Original publisher: [Read original article]() Published: 2019-02-04T00:00:00Z Content type: tutorial Language: en Sources: [Dan Abramov]() Topics: [React Hooks](), [React](), [hooks](), [Programming]() Tags: [declarative](), [hooks](), [react](), [react-hooks](), [refs]() ### AI overview This tutorial explains how to use a custom React Hook to make setInterval work with React's programming model. It covers interval setup and cleanup, the relationship between intervals and component lifecycle, and how dynamic arguments enable adjustable delays. ### Source excerpt How I learned to stop worrying and love refs. ## Why Isn't X a Hook? DevFeed: [Why Isn't X a Hook?]() Original publisher: [Read original article]() Published: 2019-01-26T00:00:00Z Content type: tutorial Language: en Sources: [Dan Abramov]() Topics: [React](), [React Hooks](), [debugging]() Tags: [article](), [breakpoint](), [bug](), [debugging](), [deep-dive](), [react](), [react-hooks]() ### AI overview This deep dive explains why some React APIs should not be designed as Hooks. It focuses on preserving composition and debugging as applications and custom Hook nesting grow. ### Source excerpt Just because we can, doesn't mean we should. ## Why Do React Hooks Rely on Call Order? DevFeed: [Why Do React Hooks Rely on Call Order?]() Original publisher: [Read original article]() Published: 2018-12-13T00:00:00Z Content type: opinion Language: en Sources: [Dan Abramov]() Topics: [hooks](), [React Hooks](), [React]() Tags: [classes](), [hooks](), [mixins](), [react](), [react-hooks]() ### AI overview This personal article explains why React Hooks rely on a persistent call index between component re-renders. It discusses the design rationale, the ability to use Hooks repeatedly in a component, and the implications of that controversial choice. ### Source excerpt Lessons learned from mixins, render props, HOCs, and classes.