diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 850bc2238..0b69cfa64 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -609,17 +609,6 @@ function ChatRoom({ roomId }) { ### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/} -<<<<<<< HEAD - - -**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.** - -[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) - - - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`: ```js {3,10-12} @@ -1264,25 +1253,6 @@ Is there a line of code inside the Effect that should not be reactive? How can y -<<<<<<< HEAD -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 ```js import { useState, useEffect, useRef } from 'react'; import { useEffectEvent } from 'react'; @@ -1394,25 +1364,6 @@ Your Effect needs to read the latest value of `duration`, but you don't want it -<<<<<<< HEAD -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 ```js import { useState, useEffect, useRef } from 'react'; import { FadeInAnimation } from './animation.js'; diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index c8f9d6a3a..47a4cf52a 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -837,17 +837,6 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a ### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/} -<<<<<<< HEAD - - -**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.** - -[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) - - - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 As you start using `useChatRoom` in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook: ```js {9-11} @@ -1721,25 +1710,6 @@ html, body { min-height: 300px; } } ``` -<<<<<<< HEAD -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) @@ -2213,25 +2183,6 @@ It looks like your `useInterval` Hook accepts an event listener as an argument. -<<<<<<< HEAD -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 ```js import { useCounter } from './useCounter.js'; import { useInterval } from './useInterval.js'; @@ -2287,25 +2238,6 @@ With this change, both intervals work as expected and don't interfere with each -<<<<<<< HEAD -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - -======= ->>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027 ```js import { useCounter } from './useCounter.js';