Browse Source

[Beta] Fix some code blocks

main
Dan Abramov 2 years ago
parent
commit
45b1068b69
  1. 10
      beta/src/content/learn/removing-effect-dependencies.md

10
beta/src/content/learn/removing-effect-dependencies.md

@ -1116,7 +1116,7 @@ function ChatRoom({ options }) {
The logic gets a little repetitive (you read some values from an object outside an Effect, and then create an object with the same values inside the Effect). But it makes it very explicit what information your Effect *actually* depends on. If an object is re-created unintentionally by the parent component, the chat would not re-connect. However, if `options.roomId` or `options.serverUrl` actually change, the chat would re-connect as you'd expect.
#### Calculate primitive values from functions
#### Calculate primitive values from functions {/*calculate-primitive-values-from-functions*/}
The same approach can work for functions. For example, suppose the parent component passes a function:
@ -1169,7 +1169,7 @@ This only works for [pure](/learn/keeping-components-pure) functions because the
<Challenges>
#### Fix a resetting interval
#### Fix a resetting interval {/*fix-a-resetting-interval*/}
This Effect sets up an interval that ticks every second. You've noticed something strange happening: it seems like the interval gets destroyed and re-created every time it ticks. Fix the code so that the interval doesn't get constantly re-created.
@ -1241,7 +1241,7 @@ Instead of reading `count` inside the Effect, you pass a `c => c + 1` instructio
</Solution>
#### Fix a retriggering animation
#### Fix a retriggering animation {/*fix-a-retriggering-animation*/}
In this example, when you press "Show", a welcome message fades in. The animation takes a second. When you press "Remove", the welcome message immediately disappears. The logic for the fade-in animation is implemented in the `animation.js` file as plain JavaScript [animation loop.](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) You don't need to change that logic. You can treat it as a third-party library. Your Effect creates an instance of `FadeInAnimation` for the DOM node, and then calls `start(duration)` or `stop()` to control the animation. The `duration` is controlled by a slider. Adjust the slider and see how the animation changes.
@ -1505,7 +1505,7 @@ Event functions like `onAppear` are not reactive, so you can read `duration` ins
</Solution>
#### Fix a reconnecting chat
#### Fix a reconnecting chat {/*fix-a-reconnecting-chat*/}
In this example, every time you press "Toggle theme", the chat re-connects. Why does this happen? Fix the mistake so that the chat re-connects only when you edit Server URL or choose a different the chat room.
@ -1798,7 +1798,7 @@ Sticking to primitive props where possible makes it easier to optimize your comp
</Solution>
#### Fix a reconnecting chat, again
#### Fix a reconnecting chat, again {/*fix-a-reconnecting-chat-again*/}
This example connects to the chat either with or without encryption. Toggle the checkbox and notice the different messages in the console when the encryption is on and off. Try changing the room. Then, try toggling the theme. When you're connected to a chat room, you will receive new messages every few seconds. Verify that their color matches the theme you've picked.

Loading…
Cancel
Save