Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions react/states_and_effects/how_to_deal_with_side_effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@ export default function Clock() {

<div class="lesson-note" markdown="1">

Usually, you do not need to add dependencies to your `useEffect`hook manually. Your linter should let you know about the dependencies it expects. Letting the linter show errors and fixing them instead of suppressing them is usually the best idea. On a general note, the following block does a good job of summing this point up.
#### A note on managing useEffect

Usually, you do not need to add dependencies to your `useEffect` hook manually. Your linter should let you know about the dependencies it expects. Letting the linter show errors and fixing them instead of suppressing them is usually the best idea. On a general note, the following block does a good job of summing this point up.

```jsx
useEffect(() => {
Expand All @@ -113,7 +115,7 @@ useEffect(() => {

Oh, it's not going berserk anymore! We still have an issue with the counter updating twice every second though. That can be understood as a [behavior caused by the React StrictMode](https://react.dev/reference/react/StrictMode#strictmode). It is supposed to help us catch bugs, so what is that bug here?

With `StrictMode`, the `App` component is mounted, unmounted, then mounted again. This behaviour of `StrictMode` is only in the development environment. Notice that every time the `useEffect` hook runs, a new `setInterval` is used. When the component is unmounted the first time, `setInterval` is not stopped, it keeps incrementing. This unnecessary behavior can be prevented by clearing the interval when the component is unmounted and that is where the third part of our `useEffect` hook comes in - the cleanup function.
With `StrictMode`, the `App` component is mounted, unmounted, then mounted again. This behavior of `StrictMode` is only in the development environment. Notice that every time the `useEffect` hook runs, a new `setInterval` is used. When the component is unmounted the first time, `setInterval` is not stopped, it keeps incrementing. This unnecessary behavior can be prevented by clearing the interval when the component is unmounted and that is where the third part of our `useEffect` hook comes in - the cleanup function.

You can return a function from the callback in the `useEffect` hook, which will be executed each time before the next effect is run, and one final time when the component is unmounted. In this case, let us clean up the interval with a cleanup function.

Expand Down
2 changes: 1 addition & 1 deletion react/states_and_effects/introduction_to_state.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ Hooks are functions that let you use React features. All hooks are recognizable
1. [State: A Component's Memory](https://react.dev/learn/state-a-components-memory)
1. [Render and Commit](https://react.dev/learn/render-and-commit)
1. Read this [article on React Reconciliation Algorithm](https://medium.com/javarevisited/react-reconciliation-algorithm-86e3e22c1b40) for a great explanation.
1. Head back to the colour changing background example from earlier in the lesson, and add a new state variable to keep track of the number of times the background color has been changed. Display the number of times the background color has been changed on the page. You will need to fork the codesandbox to do this, which requires a codesandbox account. Click "Open Editor" in the top right of the codesandbox embed, then "Fork" in the top right of the editor.
1. Head back to the color changing background example from earlier in the lesson, and add a new state variable to keep track of the number of times the background color has been changed. Display the number of times the background color has been changed on the page. You will need to fork the codesandbox to do this, which requires a codesandbox account. Click "Open Editor" in the top right of the codesandbox embed, then "Fork" in the top right of the editor.

</div>

Expand Down
2 changes: 1 addition & 1 deletion react/the_react_ecosystem/project_shopping_cart.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@ By now you've come far from your React-baby days. You have tools like routers an
}
```

- **Cloudflare Pages**: As of the time of writing, unlike Netlify and Vercel, no additional steps are required as the default behaviour will allow `react-router-dom` to correctly handle redirects for SPAs. You can learn more about this at the [Cloudflare documentation on serving pages](https://developers.cloudflare.com/pages/platform/serving-pages/).
- **Cloudflare Pages**: As of the time of writing, unlike Netlify and Vercel, no additional steps are required as the default behavior will allow `react-router-dom` to correctly handle redirects for SPAs. You can learn more about this at the [Cloudflare documentation on serving pages](https://developers.cloudflare.com/pages/platform/serving-pages/).

</div>