You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/reusing-logic-with-custom-hooks.md
-68Lines changed: 0 additions & 68 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -837,17 +837,6 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a
837
837
838
838
### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/}
839
839
840
-
<<<<<<< HEAD
841
-
<Canary>
842
-
843
-
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
844
-
845
-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
846
-
847
-
</Canary>
848
-
849
-
=======
850
-
>>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027
851
840
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:
852
841
853
842
```js {9-11}
@@ -1721,25 +1710,6 @@ html, body { min-height: 300px; }
1721
1710
}
1722
1711
```
1723
1712
1724
-
<<<<<<< HEAD
1725
-
```json package.json hidden
1726
-
{
1727
-
"dependencies": {
1728
-
"react":"canary",
1729
-
"react-dom":"canary",
1730
-
"react-scripts":"latest"
1731
-
},
1732
-
"scripts": {
1733
-
"start":"react-scripts start",
1734
-
"build":"react-scripts build",
1735
-
"test":"react-scripts test --env=jsdom",
1736
-
"eject":"react-scripts eject"
1737
-
}
1738
-
}
1739
-
```
1740
-
1741
-
=======
1742
-
>>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027
1743
1713
</Sandpack>
1744
1714
1745
1715
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.
2213
2183
2214
2184
<Sandpack>
2215
2185
2216
-
<<<<<<< HEAD
2217
-
```json package.json hidden
2218
-
{
2219
-
"dependencies": {
2220
-
"react":"canary",
2221
-
"react-dom":"canary",
2222
-
"react-scripts":"latest"
2223
-
},
2224
-
"scripts": {
2225
-
"start":"react-scripts start",
2226
-
"build":"react-scripts build",
2227
-
"test":"react-scripts test --env=jsdom",
2228
-
"eject":"react-scripts eject"
2229
-
}
2230
-
}
2231
-
```
2232
-
2233
-
=======
2234
-
>>>>>>> 11cb6b591571caf5fa2a192117b6a6445c3f2027
2235
2186
```js
2236
2187
import { useCounter } from'./useCounter.js';
2237
2188
import { useInterval } from'./useInterval.js';
@@ -2287,25 +2238,6 @@ With this change, both intervals work as expected and don't interfere with each
0 commit comments