From 55a265c8abc36ec1e781dd244adc8967789289cf Mon Sep 17 00:00:00 2001 From: Kanika Date: Tue, 13 Jan 2026 18:21:47 +0530 Subject: [PATCH 1/3] Clarify when Effects are needed for data fetching Improve the explanation in the 'Fetching data' section to clearly distinguish when an Effect is needed (synchronization with external system) versus when it's not needed (user events, data transformation). Closes #8226 --- src/content/learn/you-might-not-need-an-effect.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 81a0842eb60..4008f24c8cf 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -720,11 +720,11 @@ function SearchResults({ query }) { } ``` -You *don't* need to move this fetch to an event handler. +This is a case where an Effect *is* needed because you're [synchronizing](/learn/synchronizing-with-effects) with an external system (the network). However, this is different from the earlier examples where Effects weren't needed. -This might seem like a contradiction with the earlier examples where you needed to put the logic into the event handlers! However, consider that it's not *the typing event* that's the main reason to fetch. Search inputs are often prepopulated from the URL, and the user might navigate Back and Forward without touching the input. +The key difference: here, you need to fetch data whenever `query` or `page` changes, regardless of *how* they changed. The `query` might come from the URL (when the user navigates Back/Forward), or it might be typed by the user. The `page` might change from a button click or from restoring scroll position. It doesn't matter where `page` and `query` come from—while this component is visible, you want to keep `results` synchronized with data from the network for the current `page` and `query`. This is why it's an Effect. -It doesn't matter where `page` and `query` come from. While this component is visible, you want to keep `results` [synchronized](/learn/synchronizing-with-effects) with data from the network for the current `page` and `query`. This is why it's an Effect. +In contrast, if fetching was only needed in response to a specific user action (like clicking a "Search" button), you would put it in that event handler instead. However, the code above has a bug. Imagine you type `"hello"` fast. Then the `query` will change from `"h"`, to `"he"`, `"hel"`, `"hell"`, and `"hello"`. This will kick off separate fetches, but there is no guarantee about which order the responses will arrive in. For example, the `"hell"` response may arrive *after* the `"hello"` response. Since it will call `setResults()` last, you will be displaying the wrong search results. This is called a ["race condition"](https://en.wikipedia.org/wiki/Race_condition): two different requests "raced" against each other and came in a different order than you expected. From bd7542929927465350ceb870e02c36a090653d5e Mon Sep 17 00:00:00 2001 From: Kanika Date: Sun, 18 Jan 2026 00:41:45 +0530 Subject: [PATCH 2/3] Add TypeScript types to logger example Add import type and satisfies Logger to the basic logging example to provide better IntelliSense and type safety for users. Fixes #8245 --- src/content/reference/react-compiler/logger.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index 41e2a1da064..5d7df1e7d85 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -66,7 +66,9 @@ Configures custom logging to track compiler behavior and debug issues. Track compilation success and failures: -```js +```ts +import type { Logger } from 'babel-plugin-react-compiler'; + { logger: { logEvent(filename, event) { @@ -82,7 +84,7 @@ Track compilation success and failures: default: {} } } - } + } satisfies Logger, } ``` From dffae74c18efdc5aef471879f866d9bf37195d45 Mon Sep 17 00:00:00 2001 From: Kanika Date: Sun, 18 Jan 2026 00:48:32 +0530 Subject: [PATCH 3/3] Add TypeScript types to all logger examples --- src/content/reference/react-compiler/logger.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index 5d7df1e7d85..2d63d924eda 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -8,13 +8,15 @@ The `logger` option provides custom logging for React Compiler events during com -```js +```ts +import type { Logger } from 'babel-plugin-react-compiler'; + { logger: { logEvent(filename, event) { console.log(`[Compiler] ${event.kind}: ${filename}`); } - } + } satisfies Logger, } ``` @@ -92,7 +94,9 @@ import type { Logger } from 'babel-plugin-react-compiler'; Get specific information about compilation failures: -```js +```ts +import type { Logger } from 'babel-plugin-react-compiler'; + { logger: { logEvent(filename, event) { @@ -114,7 +118,7 @@ Get specific information about compilation failures: } } } - } + } satisfies Logger, } ```